Eliminazione dell'aliasing su un elemento circolare SVG

Question

Realizzo un grafico a torta SVG animato. Fondamentalmente ho due elementi SVG, il primo ottiene uno border-radius di 50%, il secondo è un cerchio che riempio a un valore specifico. Alla fine, che fa un cerchio sopra un altro cerchio, entrambi hanno le stesse dimensioni.

C'è qualche tipo di aliasing SVG che sembra difficile da eliminare. È molto visibile negli angoli superiori, sinistro, inferiore e destro del cerchio, almeno su Google Chrome.

Ecco la parte HTML

<figure id="pie" data-percentage="60"> 
    <div class="receiver"></div> 
    <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> 
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/> 
    </svg> 
</figure> 

Ecco il mio codepen per la descrizione più accurata del problema. Ho provato varie soluzioni incluso l'attributo SVG di rendering della forma, ma senza risultato.

Ecco uno screenshot, l'aliasing non è così visibile come nel codepen (almeno per me)

Answer 1

completa percentuale svg cerchio

Ho anche incontrato questo problema prima: Pixel edge on circle Questo accade quando si modifica un elemento con raggio di bordo.
Si potrebbe andare per la risposta nella risposta collegata sopra, ma penso che sia meglio entrambe le prestazioni ed esteticamente se si utilizza/modifica solo svg.

Esempio:

var circ = document.getElementsByClassName("pie2"); 
 
var text = document.getElementsByClassName("text"); 
 
text = text[0]; 
 
circ = circ[0]; 
 
var maxvalue = 320; 
 
var value = maxvalue; 
 
var stop = false; 
 

 
function increase() { 
 
    if (value > 0) { 
 
    circ.style.strokeDashoffset = value--; 
 
    text.textContent = Math.abs(Math.floor((value/maxvalue) * 100) - 100) + "%"; 
 
    } else { 
 
    clearInterval(intervalid); 
 
    } 
 
} 
 

 
var intervalid = setInterval(increase, 25);

.pie { 
 
    fill: none; 
 
    stroke: #222; 
 
    stroke-width: 99; 
 
} 
 
.pie2 { 
 
    fill: none; 
 
    stroke: orange; 
 
    stroke-width: 100; 
 
    stroke-dasharray: 320; 
 
    stroke-dashoffset: 320; 
 
} 
 
.text { 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
}

<figure id="pie" data-percentage="90"> 
 
    <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> 
 
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" /> 
 
    <circle r="50" cx="100" cy="100" class="pie2" /> 
 
    <text class="text" x="80" y="110">0%</text> 
 
    </svg> 
 
</figure>