不显示内联背景 SVG 图像

Question

我一直在尝试插入一个简单的 SVG 图像作为内联背景，但由于某些未知原因，它在 IE 和 Firefox 中失败了。

如果我将数据编码为 base64，它可以工作，但更难看，语法应该没问题，因为其他带有圆圈而不是路径的内嵌图像可以正常工作。 SVG 数据已经优化 https://jakearchibald.github.io/svgomg/ 我没有手动修改它。

div {
   height: 30px;
  width: 100px;
  border: 1px solid black;

  background-repeat:no-repeat;
  background-position:100% 0;
  }
.utf {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M1.168.47L15.53.53l.033 14.332z' fill='#00c000' fill-rule='evenodd' stroke='#00c000' /></svg>");

}
.base64 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBkPSdNMS4xNjguNDdMMTUuNTMuNTNsLjAzMyAxNC4zMzJ6JyBmaWxsPScjMDBjMDAwJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIHN0cm9rZT0nIzAwYzAwMCcvPjwvc3ZnPg==");
}
.circle {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>");

<div class='utf'>UTF</div>
<div class='base64'>Base64</div>
<div class='circle'>utf circle</div>

运行这个例子，有三个div，第一个失败，第二个有SVG数据为base64的，最后一个有纯文本数据但有一个圆圈元素有效。

为什么会失败？

Answer 1

URL 中的 # 字符是 fragment identifier 开头的保留字符，因此您的 URL 无效。

您必须将每个 # 编码为 %23。

您的最后一个示例恰好不包含 # 这就是它起作用的原因。

不显示内联背景 SVG 图像

Background SVG image inline not displayed

css

svg

background-image