如何在 FireFox 中为 SVG 使用十六进制值

Question

我正在使用 CSS class 将 SVG URL 加载到网页中。这适用于我测试过的所有浏览器，除了 Firefox 35.0.1（可能还有更早版本的 Firefox）。我注意到，当使用实际颜色名称（例如白色）作为笔划时，它会按预期工作，但是当我使用十六进制值（例如 #ffffff）时，它根本不会显示笔划。根据 MDN，hex values are supported.

所以，这很好用：

.ui-stroke-icon .ui-icon-head:after,
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>

但这不是：

.ui-stroke-icon .ui-icon-head:after,
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>

有什么方法可以在这里使用十六进制值作为颜色吗？这确实有助于让我的 Sass 尽可能保持干爽。

Answer 1

字符# reserved in URLs 作为片段标识符的开始。您必须将其编码为 %23 才能使 URL 有效。这不是 Firefox 的错误。

或者，您可以使用 base64 对整个字符串进行编码。

如何在 FireFox 中为 SVG 使用十六进制值

How to use a hex value for SVG in FireFox

css

firefox

svg

sass