CODEWITHSUNDEEP
csssvg
user2879704
user2879704

Reputation:

Increasing svg circle stroke-width brings down inner circle size

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, enter image description here

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?

Upvotes: 0

Views: 1315

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

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.

Upvotes: 3

Related Questions