CSS中的SVG内联不适用于FireFox

Question

我正在尝试在我的CSS中内联一个svg

background-image: url('data:image/svg+xml;utf8,<?xml ......');

以下是我原始SVG的示例，它在Chrome中有效，但在FireFox中无效：jsfiddle

要了解我创建此DEMO的问题。我使用了不同的SVG并且它们有效，除了附加到#a0元素的SVG（这个在Chrome中也不起作用）

有人知道为什么FF不会渲染SVG吗？

Answer 1

您的数据URI无效，因为它包含保留的＃字符，表示a fragment identifier

的开头

您需要URL encode数据才能使其生效并让Firefox显示数据。 URL编码将替换％23的＃字符，它可能会替换其他保留字符，具体取决于您使用过的字符。