なぜ最後の円は他の円よりも大ですか？

Question

私は同じstroke-widthの3つのサークルsvg要素を持っていますが、最後のものは大胆です。ここ
は、SVGコードです：

：

<div> 
    <svg width="114" height="114"> 
     <circle stroke="#6d86c7" stroke-dashoffset="62.02111948377269" stroke-dasharray="62.02111948377269,258.4213311823862" r="51" cx="50%" cy="50%"></circle> 
     <circle stroke="#e05c5c" stroke-dashoffset="165.38965195672716" stroke-dasharray="103.36853247295448,217.07391819320443" r="51" cx="50%" cy="50%"></circle> 
     <circle stroke="#f6a623" stroke-dashoffset="320.4424506661589" stroke-dasharray="155.05279870943173" r="51" cx="50%" cy="50%"></circle> 
    </svg> 
</div> 

その結果、このように見えます。

最後のものは、常に大胆取得するようにすべての3つの円が白fillを持っているので、これが起こっている

Answer 1

理由がある...らしいです。それぞれが描画されると、白い塗り潰しが前の円のストロークの内側部分を上書きします。ストロークは、円の内側に半分、外側に半分になるように描かれていることを忘れないでください。

解決策は、3つの円のうち最初のものにのみ白い塗りつぶしをすることです。

#first circle { 
 
    stroke-width: 4px; 
 
    fill: none; 
 
} 
 

 
#first circle:nth-child(1) { 
 
    fill: #fff; 
 
}

<div id="first"> 
 
    <svg width="114" height="114"> 
 
    <circle stroke="#6d86c7" stroke-dashoffset="62.02111948377269" stroke-dasharray="62.02111948377269,258.42133118 23862" r="51" cx="50%" cy="50%"></circle> 
 
    <circle stroke="#e05c5c" stroke-dashoffset="165.38965195672716" stroke-dasharray="103.36853247295448,217.07391819320443" r="51" cx="50%" cy="50%"></circle> 
 
    <circle stroke="#f6a623" stroke-dashoffset="320.4424506661589" stroke-dasharray="155.05279870943173,165.38965195672712" r="51" cx="50%" cy="50%"></circle> 
 
    </svg> 
 
</div>