SVG 描边渐变导致水平线在 iOS Safari 上显示

Question

在我的 SVG 路径中添加径向渐变似乎会在某些 iOS 设备上或在 iOS 设备上放大/缩小时导致奇怪的水平（抗锯齿？）线条。我无法在其他地方复制它。

这是（独立的）代码：

<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>

还有问题：

请注意，并非每台 iPhone 或 iPad 上都会发生这种情况，但当您尝试放大和缩小时通常可以复制它。

我能够将问题确定为这个特定的用例：一旦将渐变添加到笔划中，它就会开始发生。如果您将

stroke="url(#axesGradient)

更改为

stroke="#FFF"

，则似乎不会发生。

有什么方法可以优化 SVG 以防止渲染问题吗？

这是一个 Codepen，其中包含上面的确切代码。

Answer 1

有同样的问题，但就我而言，这些行出现在 IOS 16 上的任何浏览器中，更新到 IOS 16.3 修复了它

Answer 2

我在最新的 iOS 中在 svg 形状上应用发光效果滤镜时遇到了这个问题。我最终发现将

overflow:visible

应用于 svg 元素可以解决这个问题。我不知道为什么。