html - Aligning SVG within parent -

html - Aligning SVG within parent -

i'm learning svg , getting bit of help here. code: http://jsfiddle.net/c8d34/6/

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

how can align circle sits horizontally aligned within bluish box , aligned bottom vertically. believe with:

x="50" y="0"

but haven't had luck that, still doesn't sit down in right place. help appreciated.

svg { height: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 50%; }

try this. fiddle http://jsfiddle.net/c8d34/10/

html css svg