Firefox 在 SVG 中插入转义字符 — XML 声明格式不正确答案

【问题标题】：Firefox inserts escape characters in SVG — XML declaration not well-formedFirefox 在 SVG 中插入转义字符 — XML 声明格式不正确
【发布时间】：2015-06-18 14:59:16
【问题描述】：

我有将元素背景设置为 SVG 图像的 CSS 代码，它在 Chrome 中运行良好，但在 Firefox 中我到处都有转义字符，我的图形不会显示。

为什么 Firefox 给我所有这些\？

background-image: url("data:image/svg+xml;utf8,<?xml version=\"1.0\" encoding=\"utf-8\"?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg version=\"1.1\" id=\"Isolation_Mode\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"19.636px\" height=\"10.83px\" viewBox=\"0 0 19.636 10.83\" enable-background=\"new 0 0 19.636 10.83\" xml:space=\"preserve\"> <polyline fill=\"none\" stroke=\"#e6e5e1\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" points=\"2.232,1.882 9.818,8.741 17.403,1.882 \"/> </svg>")

【问题讨论】：

您是否尝试过将 SVG 数据编码为 Base64 并使用 Base64 data-URI？此类 SVG 代码中有太多字符会在语法上干扰 CSS。
谢谢，我们在 sass 中使用 base64 编码，有点像这样：@return url('data:image/svg+xml;base64,'+ base64_encode($svg));。但是 sass 编译时间一直在增加，最终我们决定改用 libsass。是否有可以在 libsass 中使用的 base_encode64() 函数？不幸的是，我们不能只是静态地让所有内容都是 base64，因为我们在编码之前为元素生成颜色。

标签： html css svg escaping data-uri

【解决方案1】：

您对 url 和 URL 中包含的数据都使用了双引号。通常的做法是对一个使用单引号，对另一个使用双引号，例如

background-image: url("data:image/svg+xml;utf8,<?xml version='...

或

background-image: url('data:image/svg+xml;utf8,<?xml version="...

Firefox 在您的情况下转义内引号是非常正确的。

Firefox 不会显示任何内容的原因是 # 字符保留在 URL 中以指示 a fragment identifier，如果您不使用它，则需要将其转义为 %23。所以

stroke=\"#e6e5e1\"

无效。 Chrome 应该拒绝这个，但它目前没有，因此没有正确处理片段标识符。

【讨论】：

谢谢，这已经很详尽了。插入转义字符让我很奇怪。我想我必须找到一种方法来重新编码 base64。