SVG分段圓環圖內部圓半徑

知道外<circle>元件的stroke-width和半徑，如何能內<circle>的精確半徑被計算，以便它只竟把的外<circle>內邊緣？如果使用r = c/(2π)計算外部<circle>的半徑，並且周長爲100，那麼它只是從圓周中減去一定量的問題？或者是否會更有效地創建額外的<circle>元素，以覆蓋擴展的內部<circle>？SVG分段圓環圖內部圓半徑

半徑〜14.5視覺上看起來非常接近，但我希望儘可能精確。

body { 
 
    background: #eee; 
 
}

<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut"> 
 
    <circle class="donut-hole" cx="21" cy="21" r="14.45" fill="#fff"></circle> 
 
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="transparent" stroke-width="3"></circle> 
 

 
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="85 15" stroke-dashoffset="0"></circle> 
 
</svg>

謝謝你的任何幫助，您可以提供！

來源

2017-10-09 Alexander Staroselsky

半徑就是外圓的半徑減去行程寬度的一半。不過，在某些情況下，您可能會遇到舍入問題。 – jcaron

只需要清楚，這裏的「正確」值應該是14.41549430918954。 – jcaron

謝謝你的解釋。這似乎工作得很好！如果您創建瞭解決方案的答案，我可以標記爲正確。謝謝！ –

您的外圓內邊緣的半徑是很簡單：外圓半徑 - 描邊寬度/ 2

這是因爲路徑上輸入的筆劃被繪製。

所以在你的例子中半徑是14.41549430918954（15.91549430918954 - 3/2）。

請注意，在某些情況下，可能會出現舍入誤差，這可能會留下小小的空隙。

來源

2017-10-09 22:53:34 jcaron

SVG分段圓環圖內部圓半徑

回答

相關問題