Sam Sam - 1 year ago 73
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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download