Sam Sam - 4 months ago 14
HTML Question

Trying to center an svg circle inside a div

I have a simple markup:

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


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.

Answer

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