CSS中的内联SVG不起作用

Question

我在CSS文件中使用内联SVG填充一个div的背景。但它不起作用。我测试了我的SVG代码，它是好的。您可以通过将svg代码复制到此https://www.rapidtables.com/web/tools/svg-viewer-editor.html进行测试。

#bgr{
  width:500px;
  height:500px;
  background:url('data:image/svg+xml;utf8,<svg width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>');
}

<div id="bgr"></div>

- Freelancer

---

将其通过base64转换器运行，这个很好用。 - chriskirknielsen

Answer 1

您需要设置 xmlns="http://www.w3.org/2000/svg"。您可以在 此处 找到更多信息：

#bgr{
  width:500px;
  height:500px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>');
}

<div id="bgr"></div>

- Temani Afif

Answer 2

您可以将它转换为base64图像，有许多在线工具可以做到这一点，例如：

http://b64.io/

#bgr{

  width:500px;
  height:500px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiB2ZXJzaW9uPSIxLjEiPiAgIDxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjYiIGZpbGw9ImdyZWVuIi8+PC9zdmc+);
  );
}

<div id="bgr"></div>

- Jordi Flores

---

他可以，但他不需要 - Temani Afif

真的，语言错误 - Jordi Flores