css - 增加 svg circle stroke-width 会降低内圆的大小

Question

我的理解是，带有 stroke-width 的 svg circle 渲染两个同心圆(或类似 donut 的图像)，其内半径为 r，外半径为 r 加 stroke-width.

看起来，

但是，当 stroke-width 从 4 增加到 24 时，可以看到内圈变小了吗？

Plunker 代码是 here .那么，公式有什么问题，

external radius = r + stroke-width

更重要的是，为什么内圈大小取决于笔划宽度？

Answer 1

恐怕你的理解是错误的。

带有 stroke-width 的 SVG 圆圈渲染两个同心圆(或类似 donut 的图像)，其内半径为 r - ½ 笔画宽度，其外半径为 r + ½ 笔画宽度。