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

网址中的＃字符是fragment identifier开头的保留字符，因此您的网址无效。

您必须将每个＃编码为％23。

你的最后一个例子不包含＃，这就是它起作用的原因。

背景SVG图像内联未显示

1 个答案: