两个完全相同的 SVG 路径绘制方式不完全相同

Question

我在 SVG canvas 上绘制了两条彼此完全相同的路径。即使另一条路径应该隐藏它，也可以看到后面的路径。这是 SVG：

<svg viewBox="0 0 100 100">
    <!-- BLUE PATH -->
    <path id="blue" d="M 50,50 m 0,-48 a 48,48 0 1 1 0,96 a 48,48 0 1 1 0,-96" stroke="blue" stroke-width="4" fill-opacity="0" style="stroke-dasharray: 302px, 302px; stroke-dashoffset: 0px;"></path>

    <!-- YELLOW PATH -->
    <path id="yellow" d="M 50,50 m 0,-48 a 48,48 0 1 1 0,96 a 48,48 0 1 1 0,-96" stroke="yellow" stroke-width="4" fill-opacity="0" style="stroke-dasharray: 302px, 302px; stroke-dashoffset: 120px;"></path>
</svg>

外观如下：

您可以在 JSFiddle 中进行测试：http://jsfiddle.net/k0xxp6g9/1/

从黄线后面可以稍微看到蓝色路径"leaking"。我认为这与抗锯齿有关。将 shape-rendering="crispEdges" 设置为 SVG 可以隐藏问题，但线条不再平滑。

如何解决这个问题，使蓝色路径不会 "leak" 在黄色路径后面？ 我不想让蓝色路径比黄色路径更细一.

Answer 1

您正在看到抗锯齿的效果。

正确的解决方法是只在可见的地方绘制部分蓝色圆弧。

两个完全相同的 SVG 路径绘制方式不完全相同

Two exactly same SVG paths not drawn exactly the same way

svg

rendering

automatic-ref-counting

antialiasing