2017-05-25 65 views
0

我有三個圓圈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

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

+0

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

+0

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

+1

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

回答

2

之所以發生這種情況是因爲所有的三個圈子中有白色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>