SVG堆叠元素颜色重叠

Question

我有一个SVG元素，其中包含两个具有完全相同尺寸和位置的<circle>个子元素。两者之间的唯一区别是它们的颜色：第一个是红色，第二个是绿色。我注意到，即使绿色圆圈位于红色上方，您仍然可以看到圆圈边缘的一点颜色偏移。 有什么方法可以避免这种颜色变化吗？

下面是一个截图，显示下面有没有红色圆圈的样子：

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

这些是我尝试但没有奏效的一些解决方案：

• 在SVG上尝试shape-rendering的不同值 - 将其设置为crispEdges类似的工作，但使边缘非常锯齿状。所有其他值都不起作用。
• 为顶部元素添加轻微模糊 - 效果不佳甚至使色彩偏移更加明显。
• 使顶部元素稍微大一点 - 但是它不是最佳的，因为我将使用弧形，底部元素必须完全相同。

欢迎任何不同的想法。

Answer 1

您可以使用滤镜来调低消除锯齿的条纹。这与crispEdges 应该具有相同的效果。

<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>