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

Posted 2023-03-06

【中文标题】如何在 FireFox 中为 SVG 使用十六进制值

【英文标题】：How to use a hex value for SVG in FireFox

【发布时间】：2015-04-19 17:11:03

【问题描述】：

我正在使用 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- 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- stroke-miterlimit="10" d="...svg coordinates here..."/></svg>

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

【参考方案1】：

字符# 是reserved in URLs 作为片段标识符的开始。您必须将其编码为 %23 才能使 URL 有效。这不是 Firefox 错误。

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

【讨论】：

感谢您的回答。在尝试了很多愚蠢的事情之后，比如尝试为rgba 着色等，这终于奏效了。我认为理解某些东西为什么不工作总是很重要的，而不是仅仅假设它是浏览器中的一个错误。

你拯救了我的一天！

当你想用[resources.openRawResource()]读取svg然后用[webView.loadData(svg, "image/svg+xml", “UTF-8”）]。对于 [ webView.loadUrl("file:///android_res/raw/image.svg") ] 情况，可以使用 #

设置颜色