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分段圆环图内部圆半径

回答

相关问题