Inkscape创建的SVG在Safari与Firefox中无法显示求助

嘿，我仔细对比了你提供的两个SVG代码，一下子就找到问题所在啦！

核心问题：非标准滤镜输入导致浏览器兼容性故障 #

有问题的SVG里，图层layer1添加了一个自定义滤镜：

<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-249.37498)" style="filter:url(#filter853);opacity:1">

这个滤镜的定义里用到了<feBlend inkscape:collect="always" mode="color-burn" in2="BackgroundImage" id="feBlend855" />——其中BackgroundImage是一个非标准的滤镜输入源，Chrome对它有特殊兼容性支持，但Safari和Firefox完全不识别这个属性。当浏览器解析不了这个滤镜时，就会直接隐藏应用了该滤镜的整个图层内容，这就是你看不到字母"p"的原因。

验证：对比正常SVG的差异 #

正常显示的SVG里，既没有这个自定义滤镜的定义，也没有给图层添加filter样式，路径内容和有问题的SVG几乎完全一致，所以所有浏览器都能正常渲染。

快速修复方案 #

你有两种简单的修复方式：

1. 直接移除滤镜（推荐）：把有问题的SVG中layer1标签里的style="filter:url(#filter853);opacity:1"删除，同时删掉<defs>里的整个<filter>区块，修改后图层标签应该是这样：

   <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-249.37498)">
   

   这样修改后，SVG就会和你重新创建的版本一样，在所有浏览器正常显示。

2. 保留滤镜（如果需要）：如果你确实需要这个颜色混合效果，可以把in2="BackgroundImage"替换为标准支持的输入源，比如in2="SourceGraphic"，不过这个调整可能会改变最终效果，需要你根据需求测试。

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