Elementi sovrapposti SVG colore sovrapposizione

Question

Ho un elemento SVG che contiene due bambini <circle> con le stesse dimensioni e la stessa posizione. L'unica differenza tra i due è il loro colore: il primo è rosso e il secondo è verde. Ho notato che, anche se il cerchio verde è sopra il rosso, puoi ancora vedere un po 'di spostamento del colore ai bordi del cerchio. C'è un modo per evitare questo cambiamento di colore?

Ecco uno screenshot di come sembra con e senza il cerchio rosso sotto:

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

e queste sono alcune delle soluzioni che ho provato, ma didn' t work:

• Provare i diversi valori per shape-rendering su SVG - Impostazione a crispEdges ha funzionato, ma ha reso i bordi molto frastagliati. Tutti gli altri valori non hanno funzionato.
• Aggiunta di una lieve sfocatura all'elemento superiore - Non ha funzionato molto bene e ha persino reso più visibile lo spostamento del colore.
• Rendere l'elemento superiore leggermente più grande - Funziona ma non è ottimale poiché lo userò con un arco e l'elemento inferiore deve essere esattamente lo stesso.

Qualsiasi idea diversa è la benvenuta.

Answer 1

È possibile utilizzare un filtro per chiamare verso il basso la frangia anti-alias. Ciò avrà lo stesso effetto di un crispEdges dovrebbe.

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