两条完全相同的SVG路径，绘制方式不完全相同 [英] Two exactly same SVG paths not drawn exactly the same way

问题描述

我要在SVG画布上相互绘制两条完全相同的路径.即使另一条路径将其隐藏，也可以看到后面的路径.这是SVG:

I'm drawing two exactly same paths on top of each other to an SVG canvas. The path behind can be seen even though the other path should hide it. Here's the 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/

You can test this in JSFiddle: http://jsfiddle.net/k0xxp6g9/1/

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

The blue path can be slightly seen "leaking" from behind the yellow line. I think this has something to do with anti-aliasing. Setting shape-rendering="crispEdges" to SVG hides the issue, but lines are not smooth anymore.

如何解决此问题，以使蓝色路径不会泄漏"到黄色路径之后?我不想使蓝色路径比黄色路径更细.

How can I fix this so that blue path would not "leak" behind the yellow path? I wouldn't want to make blue path any thinner than the yellow one.

推荐答案

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

You are seeing the effects of antialiasing.

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

The proper fix would be to only draw the partial arc of blue where it is visible.

这篇关于两条完全相同的SVG路径，绘制方式不完全相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！