增加svg圆形行程宽度会降低内圆周大小

Question

我的理解是，带stroke-width的svg圈呈现两个同心圆（或像图像一样的圆环），其内半径为r，外半径为r plus stroke-width。

看起来像，

但是，当人们可以看到当笔画宽度从4增加到24时，内圈变小了？

Plunker代码为here。 那么，公式有什么问题，

external radius = r + stroke-width

更重要的是，为什么内圆尺寸取决于笔划宽度？

Answer 1

我担心你的理解是错误的。

带有stroke-width的SVG圆圈呈现两个同心圆（或类似圆环的图像），其内半径为r - ½行程宽度，外半径为r +½行程宽度。