Clever Geek Handbook

Two exactly the same SVG paths were not exactly matched

I am drawing two identical paths towards each other on an SVG canvas. The path behind can be seen, although another path must 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>

This is how it looks:

Circle demo

You can check it out in the JSFiddle: http://jsfiddle.net/k0xxp6g9/1/

The blue path can be seen slightly "oozing" from behind the yellow line. I think it has something to do with anti-aliasing. Setting shape-rendering = "crispEdges" for the SVG hides the problem, but the lines are no longer smooth.

How can I fix this so that the blue path doesn't seep through the yellow path? I would not want the blue path to be thinner than the yellow one.

+3


source to share


1 answer


You can see the anti-aliasing effects.



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

+2


source






More articles:


All Articles