听起来你遇到的是典型的旧版设计工具导出SVG的跨浏览器兼容性问题——2010年的Illustrator对SVG标准的支持还不够完善，导出的代码往往带有冗余属性、非标准语法，导致不同浏览器的渲染引擎（WebKit/Blink vs Gecko）处理时出现差异。结合你的场景（WordPress+客户自主上传），给你几个实用的解决方向：

1. 清理现有SVG代码（快速修复示例问题） #

先看你提供的最小复现SVG，里面有几个明显的问题：

• 重复的xmlns声明：<rect>和<path>标签里重复写了xmlns="http://www.w3.org/2000/svg"，根元素已经声明过，这会干扰浏览器解析，直接删掉这些重复声明。
• 冗余的路径节点：那个.cls-5的path包含大量微小的、重复的坐标点（比如h0l0,0a.42.42,0,0,0,0-.06s0,0,0-.06...），旧AI导出时经常生成这种“过度精确”的路径，浏览器渲染时容易出现计算误差。你可以用SVG优化工具简化这条路径，或者手动删除冗余的节点（保留核心形状即可）。
• 线性渐变单位优化：把线性渐变的x1/x2/y1/y2从绝对数值改成百分比，比如：

  <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
  

  这样更符合跨浏览器的渲染预期。

修改后的示例SVG应该能在Firefox/Safari正常显示。

2. 给客户调整Illustrator导出设置（从源头避免问题） #

既然客户还要用旧AI设计并导出SVG，帮他们调整导出参数能从根源减少兼容性问题：

• 导出时选择SVG 1.1标准（旧AI可能默认用了更早的版本）。
• 勾选简化路径选项，设置合适的简化阈值（比如1-2像素），减少路径节点数量。
• 取消保留Illustrator编辑功能，这样导出的代码会更干净，没有AI专属的冗余属性。
• 调整小数位数：把默认的2位改成3-4位，虽然你提到文字精度问题可以忽略，但路径的精度提升能减少浏览器解析时的舍入误差。

3. WordPress环境下的自动化优化 #

考虑到客户未来要自主上传SVG，在WordPress里配置自动化工具能降低维护成本：

• 安装SVG优化插件：比如SVG Support或Safe SVG，这些插件会自动清理上传的SVG代码（移除冗余属性、修复语法问题），同时提供安全验证（防止SVG注入）。
• 建议客户上传前预处理：告诉客户先用在线SVG优化工具处理AI导出的SVG，再上传到WordPress，进一步减少兼容问题。
• 强制精确渲染：在SVG的<style>里给路径类添加shape-rendering: geometricPrecision;，比如：

  .cls-5{fill:#fff; shape-rendering: geometricPrecision;}
  

  这个属性会让浏览器优先保证路径的几何精度，减少渲染差异。

4. 针对特定浏览器的微调 #

如果还有个别SVG在Safari/Firefox有问题，可以试试这些针对性修复：

• Safari渐变修复：Safari对gradientUnits="userSpaceOnUse"的处理有时会有偏差，换成gradientUnits="objectBoundingBox"并调整渐变坐标为0-1范围（比如x1="0" y1="0" x2="1" y2="1"）。
• Firefox裁剪路径修复：如果clip-path导致内容缺失，可以尝试把clip-path的形状直接转换成遮罩（<mask>），或者去掉clip-path，用形状堆叠的方式实现相同视觉效果（如果可行的话）。

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