Sam Sam - 9 months ago 36
HTML Question

Trying to center an svg circle inside a div

I have a simple markup:

<div style="background-color:red;">
<circle cx="76" cy="76" r="71"
style="fill:yellow;stroke:purple;stroke-width:10" />

See the jsfiddle here

I cannot understand the truncation of the circle at the bottom. All I want is a div with an SVG circle exactly centered. I have tried setting box-sizing and paddings but to no avail.


Should solve the truncation. <svg>'s default value is set to overflow: hidden; by default. Applying overflow: visible; to your <svg> should work.