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>