SVG叠加元素颜色重叠

Question

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

下面是一个屏幕截图，展示了有红色圆圈和没有红色圆圈的情况：

​

这是我用来复制这个的小提琴。

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

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