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

问题描述

我使用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.0encoding =utf-8？>< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns ：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 540 540enable-background =new 0 0 540 540xml：space =preserve>< path fill =nonestroke =whitestroke-width =8stroke-miterlimit =10d =... svg coordinates here .../><< ; / svg> 
  

但是这不是：

后缀，
background-image：url（'data：image / svg + xml; utf8，<？xml version =1.0encoding =utf-8？>< svg version =1.1id =Layer_1xmlns =http://www.w3.org / 2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 540 540enable-background =new 0 0 540 540xml：space =preserve>< path fill =nonestroke =＃ffffffstroke-width =8stroke-miterlimit =10d =... svg coordinate here。 ../>< / SVG>

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

解决方案

字符＃是保留在URL中作为片段标识符的开始。您必须将其编码为％23，以使URL有效。这不是Firefox的bug。另外，你也可以使用base64编码整个字符串。

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.

So, this works fine:

.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>

But this does not:

.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>

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.

解决方案

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.

Alternatively you could encode the whole string using base64.

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