如何在Firefox的data URI中正确显示含哈希(#)的SVG？

嘿，这个问题我之前也碰到过！核心原因是**#在data URI里是片段标识符的标记**，Firefox会把SVG内容里的#当成整个URI的片段分隔符，直接截断了后面的内容，所以才显示不出来。而Chrome和Edge对这种情况的处理更宽松，所以能正常渲染。

最简单的解决办法：编码#字符 #

你只需要把SVG文本里的#替换成它的URL编码形式%23，Firefox就能正确识别这是SVG内容的一部分了。修改后的代码如下：

<!-- 原本正常的示例 -->
<img src='data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px"> <text x="50" y="50">X</text> </svg>' alt="" />
<!-- 修改后可在Firefox正常显示的版本 -->
<img src='data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px"> <text x="50" y="50">%23</text> </svg>' alt="" />

额外提醒 #

其实不止#，data URI里还有不少特殊字符都需要注意编码，比如空格可以换成%20或者+，双引号也需要转义。如果你的SVG内容比较复杂，建议直接对整个SVG代码做URL编码，这样能避免遗漏任何可能导致问题的特殊字符。

内容的提问来源于stack exchange，提问作者Daniel