Search code examples
svgrenderingautomatic-ref-countingantialiasing

Two exactly same SVG paths not drawn exactly the same way

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>

Here's how it looks:

Circle demo

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

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.

Solution

  • You are seeing the effects of antialiasing.

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