通过CSS应用自定义SVG滤镜后Safari中文字不显示问题排查

你的SVG滤镜在Safari中完全隐藏内容的核心问题是滤镜单位设置冲突，以及Safari对HTML元素应用SVG滤镜时的单位解析逻辑差异：

1. filterUnits与primitiveUnits的模式冲突
   当滤镜作用于HTML元素（如<div>、文字、<img>）时，Safari无法兼容filterUnits="objectBoundingBox"（基于元素边界框比例）和primitiveUnits="userSpaceOnUse"（基于绝对像素）的混合设置，这会导致滤镜区域计算错误，最终让内容不可见。

2. feMorphology的radius单位解析错误
   在filterUnits="objectBoundingBox"模式下，Safari会把radius="3 3"解析为元素边界框的3倍比例（而非3像素），膨胀后的形状会完全覆盖原内容，视觉上就像隐藏了所有元素。

修复后的代码 #

方案1：使用userSpaceOnUse保留像素级控制（推荐） #

修改滤镜为绝对像素单位模式，移除冲突的primitiveUnits属性，同时调整滤镜边界确保描边不被裁剪：

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
  <filter id="filter" x="-3px" y="-3px" width="calc(100% + 6px)" height="calc(100% + 6px)" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feMorphology operator="dilate" radius="3 3" in="SourceGraphic" result="morphology"/>
      <feFlood flood-color="#ff8822" flood-opacity="1" result="flood"/>
      <feComposite in="flood" in2="morphology" operator="in" result="composite2"/>
      <feMerge result="merge">
          <feMergeNode in="composite2"/>
          <feMergeNode in="SourceGraphic"/>
      </feMerge>
  </filter>
</svg>

方案2：使用objectBoundingBox并调整相对比例 #

如果坚持用边界框比例模式，需要将radius改为元素边界框的相对比例值（比如0.03对应3%的元素高度，近似3px描边效果）：

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
  <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
      <feMorphology operator="dilate" radius="0.03 0.03" in="SourceGraphic" result="morphology"/>
      <feFlood flood-color="#ff8822" flood-opacity="1" result="flood"/>
      <feComposite in="flood" in2="morphology" operator="in" result="composite2"/>
      <feMerge result="merge">
          <feMergeNode in="composite2"/>
          <feMergeNode in="SourceGraphic"/>
      </feMerge>
  </filter>
</svg>

关键修改总结 #

• 移除primitiveUnits="userSpaceOnUse"，避免单位模式冲突
• 根据filterUnits模式匹配feMorphology的radius单位：
  • userSpaceOnUse下用绝对像素值（如3 3）
  • objectBoundingBox下用相对比例值（如0.03 0.03）
• 调整滤镜的x、y、width、height，确保描边不会被滤镜区域裁剪

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