Firefox不显示data-URI SVGs

Firefox使我很难用数据URI SVGs。这里是我的萨斯片段：Firefox不显示data-URI SVGs

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的错误，其中#断形象。它应该是固定的，但我试图逃避哈希无论如何。可悲的是，这并没有帮助。

任何其他的想法有什么可能是错的？

来源

2015-09-19 Afterlame

啊好吧，我试图通过反斜杠逃脱它。 '％23'did work！如果您将此作为答案，我可以将其标记为解决方案。谢谢！ – Afterlame

A＃是数据URI中片段标识符的开始。如果不这样解释，它必须编码为％23。

这是一个长期存在的Chrome/Safari bug，它们没有得到片段标识符解析权。

来源

2015-09-20 07:49:03

Firefox不显示data-URI SVGs

回答

相关问题