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

外側<circle>要素のstroke-width及び半径を知ることは、どのように内側<circle>の正確な半径を計算することができますか？外側<circle>ための半径は100である周囲を有するr = c/(2π)を用いて計算した場合、それは周囲から一定量を減算するだけですか？または、拡張された内部をカバーする追加の<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セグメント化ドーナツグラフインナー・サークルの半径

答えて

関連する問題