SVG 堆叠元素 颜色重叠

Question

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

下面是带有和不带有红色圆圈的屏幕截图：

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

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

• 在 SVG 上尝试 shape-rendering 的不同值 - 将其设置为 crispEdges 有点工作，但边缘非常锯齿。所有其他值均无效。
• 为顶部元素添加轻微的模糊效果 - 效果不佳，甚至使颜色变化更加明显。
• 使顶部元素稍大 - 可行，但不是最佳选择，因为我将使用弧形，底部元素必须完全相同。

欢迎任何不同的想法。

Answer 1

您可以使用过滤器来降低抗锯齿边缘。这将与 Kris应该具有相同的效果。

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