ios - Safari 中的 SVG 圆弧渲染瑕疵

Question

我要渲染一个非常简单的 SVG:https://jsfiddle.net/091y7uyr/3/

那里有很多数学代码，但重点是:

<svg style="position:fixed;top:0px;left:0px;width:100%;height:100%;
pointer-events:none;">

<path d="
  M 65 51
  A 434.180675278184 434.180675278184
  0 0 0
  275.01708984375 351.9502944946289

  M 65 51
  A 399.44622125592934 399.44622125592934
  0 0 0
  275.01708984375 351.9502944946289" 

  fill="black" fill-rule="evenodd">
</path>

</svg>

结果如下:

但是，在 Safari 中，在 iOS (v9.3.4) 和桌面(v9.1，build 11601.5.17.1)上它看起来有点不同:

有谁知道为什么会出现圆弧边缘之间的那条线，以及如何摆脱它？

Answer 1

您的 SVG 路径构造有点奇怪。

<svg width="400px" height="400px">
  <path d="M 59 110
           A 167.87197502859138 167.87197502859138
             0 0 0 
             200 301

           M 59 110 
           A 159.4783762771618 159.4783762771618
             0 0 0
             200 301"
        fill="black" fill-rule="evenodd"></path>
</svg>

您已经通过绘制两条从同一位置开始并沿同一方向弯曲的子路径来构建形状。所以你实际上有两个 circular segments一个个叠加。

如果我们分别绘制它们并加上一点不透明度，您可以看到实际发生的情况。

<svg width="400px" height="400px">
  <path d="M 59 110
           A 167.87197502859138 167.87197502859138
             0 0 0 
             200 301" fill="red" opacity="0.4"/>
  <path d="M 59 110
           A 159.4783762771618 159.4783762771618
             0 0 0
             200 301" fill="green" opacity="0.4"/>
</svg>

您只看到两者之间的差异(薄的半月形)的原因是因为您使用的是 even-odd fill rule .当您使用奇偶填充规则时，重叠的子路径通常会产生一个洞。

您在两个端点之间看到的细线是由于恰好位于彼此顶部的两个线段边缘之间的抗锯齿略有差异而导致的伪影。抗锯齿是使用颜色阴影使线条边缘看起来更平滑。这可能在某种程度上发生在所有浏览器上。由于某种原因，它在 Safari 中更加引人注目。

幸运的是，对于您的情况，有一个简单的解决方法。不要使用两个子路径，只需将它们组合成一个路径即可。有一条弧线从矩形 A 到 B，然后一条弧线回到起点。如果这样做，多余的行就会消失。

<svg width="400px" height="400px">
  <path d="M 59 110
           A 167.87197502859138 167.87197502859138
             0 0 0 
             200 301
           A 159.4783762771618 159.4783762771618
             0 0 1
             59 110"
        fill="black"></path>
</svg>