Firefox中SVG背景图片无法正常显示问题求助

我之前也碰到过Firefox对data URI形式的SVG背景兼容问题，给你几个靠谱的解决思路：

• 检查SVG代码完整性
  你提供的SVG代码最后是t0...，明显是截断了！Firefox对不完整的XML/SVG会直接解析失败，首先要确保你的SVG是完整闭合的——比如把<path>标签的d属性补全，并且闭合所有SVG相关标签（比如</path></svg>）。

• 正确转义特殊字符
  Firefox对data URI里的SVG字符转义要求更严格，你需要注意：

  • 把SVG中的双引号替换成单引号，或者转义为"
  • 如果SVG里有#字符，要转义为%23（因为#在URI里是锚点标识）
  • 尽量移除SVG里的多余空格，或者把空格转义为%20
    比如你原来的SVG代码里，要确保所有XML实体都正确转义（<转成<，>转成>）。

• 改用Base64编码方式
  如果utf8格式的data URI还是有问题，换成Base64编码是最稳妥的方案：

  1. 把完整的SVG代码转换成Base64字符串
  2. 把background-image的URL改成data:image/svg+xml;base64,你的Base64字符串
     示例代码：

  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI5IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgOSAxNCI+IDxwYXRoIGQ9Ik04LjM5OCA1Ljc1cTAgMC4xMDItMC4wNzggMC4xOGwtMy42NDEgMy42NDFxLTAuMDc4IDAuMDc4LTAuMTggMC4wNzh0LTAuMTgtMC4wNzhsLTMuNjQxLTMuNjQxcS0wLjA3OC0wLjA3OC0wLjA3OC0wLjE4dDAuMDc4LTAuMThsMC4zOTEtMC4zOTFxMC4wNzgtMC4wNzggMC4xOC0wLjA3OHQwLjE4IDAuMDc4bDMuMDcwIDMuMDcgMy4wNzAtMy4wN3EwLjA3OC0wLjA3OCAwLjE4LTAuMDc4dDAuMTggMC4wNzhsMC4zOTEgMC4zOTFxMC4wNzggMC4wNzggMC4wNzggMC4xOHQtMC4wNzggMC4xOGwtMy4wNzAgMy4wNy0zLjA3MC0zLjA3cS0wLjA3OC0wLjA3OC0wLjE4LTAuMDc4dC0wLjE4IDAuMDc4bC0wLjM5MSAwLjM5MXEtMC4wNzggMC4wNzgtMC4wNzggMC4xOHQwLjA3OCAwLjE4bDMuNjQxIDMuNjQxczAuMTggMC4wNzggMC4xOCAwLjA3OHQuMTgtMC4wNzhsMy42NDEtMy42NDFxMC4wNzgtMC4wNzggMC4wNzgtMC4xOHQtMC4wNzgtMC4xOHoiLz48L3N2Zz4=');
  

• 验证SVG有效性
  可以把你的SVG代码单独保存为.svg文件，在Firefox里打开看看能不能正常显示——如果单独打开都有问题，那肯定是SVG本身的语法错误，比如路径d属性写错、标签未闭合等。

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