SVG - centering a text node over a circle causing issues in Internet Explorer -

i trying center text node on circle node using svg. here's example code;

    <svg width="200" height="200" style="display:block">     <g>         <circle id="number"                     cx="22"                     cy="22"                     r="20"                     fill="#ffcc66"                     fill-opacity="1"                     stroke="#ff9933"                     stroke-opacity="1"                     stroke-width="2"                     stroke-linecap="round"                     stroke-linejoin="round">             </circle>              <text id="number"                   x="22"                   y="22"                   fill="#333333"                   font-family="sans-serif"                   font-size="22px"                   font-weight="bold"                   dominant-baseline="middle"                   alignment-baseline="central"                   pointer-events="auto"                   text-anchor="middle">                7                </text>     </g> </svg> 

the goal text node positioned in center (horizontally , vertically) on circle. see http://jsfiddle.net/ypfcj/ example.

it looks in chrome, firefox, safari , opera ie9+ seems ignoring positioning. know of solution/reason this?

as have discovered, svg support in ie incomplete , has lot more bugs other implementations.

my advice not rely on alignment-baseline , instead adjust y coordinate of <text> element. value of 30 seems work.