SVG堆叠元素颜色重叠

Question

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

这是一个截图,显示下面有没有红色圆圈的样子:

这也是我用来重现这个的小提琴.

这些是我尝试但不起作用的一些解决方案:

• 尝试shape-rendering在SVG上使用不同的值- 将其设置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>