SVGセグメント化ドーナツグラフインナー・サークルの半径

Question

外側<circle>要素のstroke-width及び半径を知ることは、どのように内側<circle>の正確な半径を計算することができますか？外側<circle>ための半径は100である周囲を有するr = c/(2π)を用いて計算した場合、それは周囲から一定量を減算するだけですか？または、拡張された内部をカバーする追加の<circle>要素を作成すると効果的でしょうか<circle>？

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

あなたが提供することができます任意の助けをありがとう！

Answer 1

あなたの外側の円の内側縁部の半径は非常に単純である：外側の円の半径 - ストロークが描画される経路上で入力されているため、ストローク幅/ 2

いません。

だからあなたの例では、半径が14.41549430918954（15.91549430918954から3/2）です。いくつかの場合には小さなギャップを残すことができる丸め誤差があってもよい

注意。