SVG stacked elements color overlap

Question

I have an SVG element that contains two <circle> children with the exact same dimensions and position. The only difference between the two is their color: the first one is red and the second is green. I've noticed that, even though the green circle is above the red, you can still see a little bit of color shift at the edges of the circle. Is there any way I can avoid this change in color?

Here's a screenshot of how it looks like with and without the red circle beneath:

Also here's the fiddle that I'm using to reproduce this.

And these are some of the solutions that I've tried but didn't work:

• Trying out the different values for shape-rendering on the SVG - Setting it to crispEdges sort of worked, but made the edges very jagged. All other values didn't work.
• Adding a slight blur to the top element - Didn't work very well and even made the color shift more visible.
• Making the top element slightly larger - Works but it's not optimal since I'll be using this with an arc and the bottom element has to be exactly the same.

Any different ideas are welcome.

Answer 1

You can use a filter to dial down the anti-aliased fringe. This will have the same effect as a crispEdges should.

<svg>
    <defs>
        <filter id="edge-removal">
            <feComponentTransfer>
                <feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 0 0 1" />
            </feComponentTransfer>
        </filter>
    </defs>
    <g filter="url(#edge-removal)">
    <circle r="250" cx="275" cy="275" stroke="#FF0000" fill="none" stroke-width="50"></circle>
    <circle r="250" cx="275" cy="275" stroke="#00FF00" fill="none" stroke-width="50"></circle>
    </g>
</svg>