我正在使用CSS类将SVG URL加载到网页中。该功能适用于我测试过的所有浏览器，但Firefox 35.0.1（以及Firefox的早期版本）除外。我注意到，当使用实际的颜色名称（例如白色）作为笔触时，它可以按预期工作，但是当我使用十六进制值（例如#ffffff）时，它根本不显示笔触。根据MDN，支持十六进制值。
所以，这很好用：
.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尽可能干燥。
字符＃在URL中保留，作为片段标识符的开头。您必须将其编码为％23，URL才有效。这不是Firefox错误。
或者，您可以使用base64对整个字符串进行编码。