向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>
问题是:SVG显示水平线
注意，这并不是在每一个iPhone或iPad上都发生，但是当你尝试放大和缩小时，你通常可以复制它。
我能够将这个问题确定为这个特殊的用例:一旦你向笔画添加渐变，它就开始发生了。如果您将stroke="url(#axesGradient)更改为stroke="#FFF"，则似乎不会发生。
是否有任何方法可以优化SVG以防止渲染问题?
这是一个与上面的代码完全相同的代码。
有同样的问题，但在我的情况下，这些行出现在IOS 16的任何浏览器中，更新到IOS 16.3修复了它