html - Mystery spacing on svg web graphic -

html - Mystery spacing on svg web graphic -

this code: http://jsfiddle.net/c8d34/17/

this code svg:

<svg viewbox="0 0 100 100"> /* here */ <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

i've tried few different things, seems although in theory circle should nail top , bottom of bluish box, instead leaves space. i've tried this:

* { padding:0px; margin:0px; }

all no avail. can please tell me why circle doesn't fill area completely.

basic geometry.

your numbers must such (r * 2) + strokewidth = height

in case, if want maintain stroke-width="4", want r = (height - strokewidth) / 2 = 96 / 2 = 48

so:

<circle cx="50" cy="50" r="48" stroke="green" stroke-width="4" fill="yellow" />

html css svg