爲什麼最後一個圓圈比其他圓圈更大膽？

我有三個圓圈svg元素與stroke-width相同，但最後一個更大膽。
下面是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>

而結果是這樣的：

the result look like this 。

好像是最後一個總是很大膽...

來源

2017-05-25 GZ Xue

請在這裏分享的SVG代碼。 – vlk

@vlk它在第一張照片。謝謝 –

您能否請您以codepen.io或jsfiddle.net等形式分享代碼。這會使診斷問題變得更容易，否則我們將不得不復制代碼，這很痛苦。 –

之所以發生這種情況是因爲所有的三個圈子中有白色fill。當每一個被繪製時，白色填充將覆蓋先前圓圈的內部部分。請記住，筆畫是爲了讓它們在半圈內，半圈在圈子中。

解決方案是隻將白色填充放在三個圓圈中的第一個。

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

來源

2017-05-25 09:30:03

爲什麼最後一個圓圈比其他圓圈更大膽？

回答

相關問題