SVG堆疊元素顏色重疊

Question

我有一個SVG元素，其中包含兩個尺寸和位置完全相同的<circle>子元素。兩者之間的唯一區別是它們的顏色：第一個是紅色，第二個是綠色。我注意到，儘管綠色圓圈在紅色之上，但您仍然可以在圓圈邊緣看到一點色彩偏移。 有什麼辦法可以避免這種顏色變化？

下面是它的樣子與不下方紅圈截圖：

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

而這些都是一些我做過嘗試，但沒解決方案的」 t工作：

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