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

Question

我正在使用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尽可能干燥.

Answer 1

字符#在URL中保留为片段标识符的开头.您必须将其编码为%23才能使URL有效.这不是Firefox的错误.

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