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

Question

我正在使用 CSS 类将 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 对整个字符串进行编码。