两条完全相同的 SVG 路径的绘制方式并不完全相同答案

【问题标题】：Two exactly same SVG paths not drawn exactly the same way两条完全相同的 SVG 路径的绘制方式并不完全相同
【发布时间】：2015-05-02 13:11:27
【问题描述】：

我在 SVG 画布上绘制了两条完全相同的路径。即使另一条路径应该隐藏它，也可以看到后面的路径。这是 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 可以隐藏问题，但线条不再平滑。

如何解决此问题，以使蓝色路径不会“泄漏”到黄色路径后面？我不想让蓝色路径比黄色路径更细。

【问题讨论】：

一些关于 SVG 渲染中的快捷方式如何导致此问题的有用信息（请参阅 joojaa 的 cmets 或 Yakk 的回答）：@987654322 @

标签： svg rendering automatic-ref-counting antialiasing

【解决方案1】：

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

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

【讨论】：