添加带有路径的SVG到css类不起作用[重复]答案

【问题标题】：Adding an SVG with Path to css class not working [duplicate]添加带有路径的SVG到css类不起作用[重复]
【发布时间】：2020-06-22 16:09:47
【问题描述】：

由于某种原因，当我将它设置为类时，这个 svg 没有显示出来。

谁能看出这是为什么？

（使用 vue.js，作为常规类添加的类没有绑定。已经测试了其他背景图像和渐变并且它们正在工作，下面的代码也是如此）。

谢谢。

<style lang="scss" scoped>
.curved-div {
  display: block;
  background-image: url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'>
  <path fill='#0099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'></path></svg>");
}
 </style>

【问题讨论】：

# 不会很好玩。使用URL encoder 之类的工具来获取可用值。

标签： css svg

【解决方案1】：

在使用 cmets 中提到的 tool 对您的 SVG 进行 URL 编码后，现在可以使用了。我添加了height: 50px 只是为了证明它有效。

.curved-div {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
  height: 50px;
}

&lt;div class="curved-div"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

#must be url escaped（替换为%23）：

.curved-div {

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' viewBox='0 0 1440 320'><path fill='%230099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z' /></svg>");
}


.svg, svg {
  width: 150px; 
  height: 100px;

  background-repeat: no-repeat;
  background-color: lightgrey;

}

&lt;div class="svg curved-div"&gt;&lt;/div&gt;

【讨论】：