Firefox在读取内联SVG中的#hex颜色代码时抛出错误

Question

这在Chrome上不会发生，但至少在FF和MS Edge上会发生。在FF中，当您尝试在CSS url()或object标记内部绘制svg时，如果svg包含像#FF0000这样的#十六进制颜色，它将崩溃。让我给你看一个例子：

<p>Not using # colors</p>
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='red' cx='50' cy='54.7' r='15.72'/></svg>">
  No SVG UTF8
</object>
<p>Using #hex colors (won't show on FF)</p>
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='#FF0000' cx='50' cy='54.7' r='15.72'/></svg>">
  No SVG UTF8
</object>

为什么会发生这种情况？SVG中还有其他方法可以写这些颜色吗？

Answer 1

URL中的一个散列字符被保留来指示片段标识符的开始。

您需要将#URL编码为%23。

这是一个Chrome漏洞，它没有执行这个规则，也没有正确解析URL。

Answer 2

我坚信，您对object标记的属性做了错误的处理。我只是删除了一些属性并使其变得简单。

<object type="image/svg+xml">
  <svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'>
    <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' />
  </svg>
  No SVG UTF8
</object>

在这种情况下，它可以毫无问题地工作。

此外，不需要具有用于嵌入svg代码的object。您可以简单地将其写在html文件中。

<svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'>
  <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' />
</svg>

您可以参考MDN了解更多详细信息。

---

如果您试图使用svg图像作为data url，首先需要使用mobilefish等网站托管的一些工具对图像进行编码。

<object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1
sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4Jy
B3aWR0aD0nNzBweCcgaGVpZ2h0PSc3MHB4JyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sOnNwY
WNlPSdwcmVzZXJ2ZSc+CiAgICA8Y2lyY2xlIGZpbGw9JyNGRjAwMDAnIGN4PSc1MCcgY3k9JzU0
LjcnIHI9JzE1LjcyJyAvPgogIDwvc3ZnPg==">
  fallback
</object>