Firefox 不显示数据 URI SVG

Question

Firefox 让我很难处理数据 URI SVG。这是我的 Sass:

的片段

background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="#{$text-color}" d="M16.1 32.848l-2.38 2.066v-13.97l-5.67-4.918-2.38 2.066V4.132l2.38-2.066L5.67 0 0 4.916v27.932l5.67 4.92V22.23l2.38-2.066v19.67l-1.19 1.032v4.148l1.19-1.033v24.58l-2.38 2.065 2.38 2.066 5.67-4.918v-28.71l2.38-2.065V52.52l-2.38 2.067 2.38 2.066v.002l5.67-4.918v-13.97l-5.67-4.92"/></svg>');

Chrome 和 Safari 都很好，但是 Firefox 根本不显示。这是来自 Firefox 的错误：

Unclosed token:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="
------------------------------------------------------------^

我发现 this 提到了一个 firefox 错误，其中 # 破坏了图像。它应该是固定的，但我还是试图逃避哈希。遗憾的是，这没有帮助。

任何其他想法可能是错误的？

Answer 1

# 是数据 URI 中片段标识符的开头。如果不以这种方式解释，则必须将其编码为 %23。

这是一个长期存在的 Chrome/Safari 错误，他们无法正确解析片段标识符。

Firefox 不显示数据 URI SVG

Firefox does not show data-URI SVGs

firefox

svg

data-uri