React项目中Safari无法正确渲染CSS设置的SVG背景图问题求助

• 核心原因是Safari的WebKit内核对作为CSS背景加载的独立SVG文件中的滤镜支持存在缺陷：你提供的SVG代码中使用了filter0_b滤镜，其中feGaussianBlur节点指定了输入源为BackgroundImage，独立SVG作为背景加载时无法获取对应的上下文背景数据，WebKit内核无法正确解析该滤镜，直接导致渲染失败。而Chrome、Edge使用的Blink内核做了额外的兼容处理，所以可以正常显示。
• SVG标签中添加了非标准的mimeType属性，也可能加重Safari的解析异常。
• 你当前的CSS没有显式指定背景图的尺寸、对齐、重复规则，不同浏览器的默认处理逻辑不一致，也可能加剧显示异常。

你可以按优先级依次尝试以下方案：

1. 清理SVG无效属性
   直接删除SVG根标签里的mimeType="image/svg+xml"属性，该属性不属于SVG标准规范，会增加浏览器解析负担。
2. 移除/替换有兼容问题的滤镜
   如果高斯模糊效果不是必须项，直接删除<g>标签上的filter="url(#filter0_b)"属性即可正常显示；如果需要保留效果，可直接将带滤镜的图形导出为静态路径，不要使用SVG动态滤镜实现。
3. 补充CSS背景相关配置
   给对应类添加显式的背景控制规则，避免浏览器默认值差异：

   .setting_coin_span {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     background-image: url(images/coin_ico2.svg);
     /* 新增以下属性 */
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
   }
   

4. 改用内联SVG方式加载
   在React项目中直接将SVG代码封装为组件，插入到对应span标签内，内联SVG在DOM中可以正常获取上下文，Safari对其滤镜的支持度远高于独立背景SVG。
5. 降级兼容方案
   如果一定要使用背景图形式，可将该SVG导出为PNG格式，针对Safari浏览器做浏览器判定，加载PNG版本的资源。

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