SVG 图像 url 在 Chrome 中但在 Firefox 中不起作用？答案

【问题标题】：SVG image url not working in Chrome but in Firefox?SVG 图像 url 在 Chrome 中但在 Firefox 中不起作用？
【发布时间】：2017-05-24 10:30:15
【问题描述】：

我试图在我的网站中包含的代码在 chrome 中无法使用，但在 Firefox 中可以使用。

代码如下：

background-image: data:image/svg+xml,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2020%2020"%20style%3D"fill%3A%23000%3B"%20height%3D""%20width%3D"">%20<path%20d%3D"M8.617%2013.227C8.09%2015.98%207.45%2018.62%205.55%2020c-.587-4.162.86-7.287%201.533-10.605-1.147-1.93.138-5.812%202.555-4.855%202.975%201.176-2.576%207.172%201.15%207.922%203.89.78%205.48-6.75%203.066-9.2C10.37-.274%203.708%203.18%204.528%208.246c.2%201.238%201.478%201.613.51%203.322-2.23-.494-2.896-2.254-2.81-4.6.138-3.84%203.45-6.527%206.77-6.9%204.202-.47%208.145%201.543%208.69%205.494.613%204.462-1.896%209.294-6.39%208.946-1.217-.095-1.727-.7-2.68-1.28z"%2F><%2Fsvg>;

如果你将它复制并粘贴到 Firefox 中，它可以工作，但它在 chrome 中不起作用。

我该如何解决？

【问题讨论】：

标签： javascript css google-chrome firefox svg

【解决方案1】：

您的 css 中似乎存在语法错误，加上浏览器与哈希字符不兼容，请尝试

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill:%23000;" > <path d="M8.617 13.227C8.09 15.98 7.45 18.62 5.55 20c-.587-4.162.86-7.287 1.533-10.605-1.147-1.93.138-5.812 2.555-4.855 2.975 1.176-2.576 7.172 1.15 7.922 3.89.78 5.48-6.75 3.066-9.2C10.37-.274 3.708 3.18 4.528 8.246c.2 1.238 1.478 1.613.51 3.322-2.23-.494-2.896-2.254-2.81-4.6.138-3.84 3.45-6.527 6.77-6.9 4.202-.47 8.145 1.543 8.69 5.494.613 4.462-1.896 9.294-6.39 8.946-1.217-.095-1.727-.7-2.68-1.28z"/></svg>');

主要区别在于数据 url 现在包含在 css url 函数符号中，唯一的转义字符是用于声明颜色的哈希 (#)，因为它在 url 中具有保留用途，它将导致浏览器认为该路径已完成。

【讨论】：

我打算投票，但实际上最好也编码其他特殊字符。特别是某些版本的 IE 在非编码字符方面存在一些问题。但是 OP 的编码似乎是错误的。此外，您确实应用但未提及的最终修复是您从标记中删除了width="" height=""。 jsfiddle.net/8s8mnu8t