CSS 中的 SVG 内联在 FireFox 中不起作用

Question

我正在尝试在我的 css

中内联一个 svg

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

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

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

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

Answer 1

您的数据 URI 无效，因为它包含 # 个保留的字符以指示 a fragment identifier

的开始

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