如何在 FireFox 中为 SVG 使用十六进制值 [英] How to use a hex value for SVG in FireFox

问题描述

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

I'm loading an SVG URL into a web page using a CSS class. This works in every browser I've tested except Firefox 35.0.1 (and probably earlier versions of Firefox). I've noticed that when using an actual color name, e.g., white, for the stroke, it works as expected, but when I use a hex value, e.g, #ffffff, it does not show a stroke at all. According to 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 尽可能保持干燥.

Is there any way I can use a hex value for the color here? This would really help keep my Sass as dry as possible.

推荐答案

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

The character # is reserved in URLs as the start of a fragment identifier. You must encode this as %23 for the URL to be valid. This is not a Firefox bug.

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

Alternatively you could encode the whole string using base64.

这篇关于如何在 FireFox 中为 SVG 使用十六进制值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！