iOS Safari中SVG描边径向渐变引发水平线渲染异常求助

问题描述 #

在SVG路径的描边应用径向渐变后，部分iOS设备或进行缩放操作时会出现奇怪的水平线条（疑似抗锯齿问题），其他设备无此现象。经排查，问题仅在为stroke应用径向渐变时触发，若将stroke="url(#axesGradient)"改为stroke="#FFF"则无异常。

隔离测试代码 #

<svg class="componentClass__chart-svg" width="335" height="318" viewBox="0 0 335 320" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="axesGradient" cx="50%" cy="0%" fx="50%" fy="0%" r="50%">
      <stop stop-color="#FFFFFF" offset="10%"></stop>
      <stop stop-color="#FFFFFF" offset="100%" stop-opacity="0.2"></stop>
    </radialGradient>
  </defs>
  <path class="componentClass__axes" stroke-width="2" stroke="url(#axesGradient)" fill="none" d="M151 12 Q167 0 183 12 L319 108 Q335 120 329 139 L276 299 Q270 318 250 318 L85 318 Q65 318 59 299 L6 139 Q0 120 16 108 Z
                    M151 37 Q167 25 183 37 L293 116 Q309 128 303 147 L260 275 Q254 294 234 294 L101 294 Q81 294 75 275 L32 147 Q26 128 42 116 Z
                    M151 62 Q167 50 183 62 L267 124 Q283 136 277 155 L244 251 Q238 270 218 270 L117 270 Q97 270 91 251 L58 155 Q52 136 68 124 Z
                    M151 87 Q167 75 183 87 L241 132 Q257 144 251 163 L228 227 Q222 246 202 246 L133 246 Q113 246 107 227 L84 163 Q78 144 94 132 Z
                    M152 113 Q167 100 183 113 L215 139 Q231 152 224 171 L213 203 Q206 222 186 222 L149 222 Q129 222 122 203 L111 171 Q104 152 119 139 Z
                    " />
</svg>

优化方案 #

以下几种方法可尝试解决该iOS渲染异常：

• 将描边转为填充路径：使用SVG编辑工具（如Inkscape）的"描边转路径"功能，把原描边扩展为闭合的填充路径，再为填充应用径向渐变。绕开iOS对渐变描边的渲染bug。
• 替换径向渐变为线性渐变：若视觉效果允许，直接用线性渐变替代；若需要近似径向效果，可叠加多个不同方向的线性渐变，降低渲染引擎计算压力。
• 对齐像素网格或添加微弱模糊：给路径添加transform="translate(0.5, 0.5)"偏移，让路径对齐像素网格；或添加filter="blur(0.1px)"的微弱模糊，平滑异常线条（注意不影响整体视觉）。
• 拆分复合路径：将当前的复合路径拆分为多个独立的<path>元素，分别应用渐变。复杂复合路径可能触发iOS渲染计算错误，拆分后降低复杂度。
• 微调渐变参数：调整径向渐变的r、cx、cy参数，比如将r="50%"改为r="51%"，或小幅偏移cx/cy，避开渲染引擎的特定bug触发条件。

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