Увеличение ширины обводки круга SVG уменьшает размер внутреннего круга

Question

Мое понимание состоит в том, что круг svg с stroke-width отображает два концентрических круга (или изображение в виде пончика) с его внутренним радиусом как r и его внешний радиус как r plus stroke-width.

Похоже,

Но, как можно видеть, когда штрих-ширина увеличивается от 4 до 24, внутренний круг становится меньше?

Код плунжера here. Итак, что же не так с формулой,

external radius = r + stroke-width 

Что еще более важно, почему размер внутреннего круга зависит от ширины хода?

Answer 1

Боюсь, что ваше понимание неверно.

Круг SVG с stroke-width отображает два концентрических круга (или изображение в виде пончика) с его внутренним радиусом как r - ½ ширины хода и его внешним радиусом как r + ½ ширины хода.