svg - 两个完全相同的 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/

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

我怎样才能解决这个问题，使蓝色路径不会“泄漏”在黄色路径后面？我不想让蓝色路径比黄色路径更细。

Answer 1

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

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