Question

我制作了一个说明问题的codepen演示：codepen.io/acusti/pen/mJmVRy

如果我尝试在Firefox中加载svg内容，这就是我得到的错误：

XML解析错误：未关闭的令牌
  地点：data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%20120'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><circle%20cx='45'%20cy='45'%20r='30'%20fill='#555555'></circle></svg>
  第1行，第77列：

<svg viewBox='0 0 120 120' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='45' cy='45' r='30' fill='
----------------------------------------------------------------------------^

注意：我通过点击Firefox开发人员工具中的数据URI字符串（在检查.separator元素时在CSS规则面板内）得到该错误，其中工具提示显示“无法加载图像”。只需将上面的错误消息中的位置字符串复制粘贴到Firefox地址栏中，即可完成相同的操作。

Answer 1

对于包含像您这样的＃字符的数据URI无效，您必须将它们转义为％23

保留未转义的＃字符以表示fragment identifier的开头。 Firefox表示解析错误是完全正确的。

Answer 2

您可以使用在线工具https://www.zhangxinxu.com/sp/svgo/

它支持让特殊字符编码，例如：

"" => %22
# => %23
% => %25 ...

SVG作为数据URI触发Firefox中的XML解析错误

2 个答案: