Increasing svg circle stroke-width brings down inner circle size

Question

My understanding is, svg circle with stroke-width renders two concentric circles (or a doughnut like image) with its internal radius as r and its external radius as r plus stroke-width.

It looks like,

But, as one can see when the stroke-width increases from 4 to 24, the inner circle has become smaller?

Plunker code is here. So, what is wrong with the formula,

external radius = r + stroke-width

More importantly, why does inner circle size depend on stroke width?

Answer 1

I'm afraid your understanding is wrong.

An SVG circle with stroke-width renders two concentric circles (or a doughnut like image) with its internal radius as r - ½ the stroke width and its external radius as r + ½ stroke-width.