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，版本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>