CODEWITHSUNDEEP
csssvg
Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

SVG stacked elements color overlap

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:

enter image description here

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:

Any different ideas are welcome.

Upvotes: 9

Views: 1379

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

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>

Upvotes: 5

Related Questions