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

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 Rules面板内)得到该错误,其中工具提示显示"无法加载图像".只需将上面的错误消息中的位置字符串复制粘贴到Firefox地址栏中即可完成相同的操作.

Answer 1

如果数据URI包含像您这样的#字符无效,则必须将它们作为%23进行转义

保留未转义的#字符以指示片段标识符的开始.Firefox表示解析错误是完全正确的.