How to center SVG text vertically in IE9

Question

In order to align text vertically in SVG one has to use the dominant-baseline attribute. This has already been discussed on SO (Aligning text in SVG) and is part of the specification.

My problem is with IE9 which apparently does not support dominant-baseline and a bunch of other things.

Do you have any ideas on how to approximate dominant-baseline: central in IE9?

Here is a sample that works in FF and Chrome. It does not work in IE9, Opera 11. Safari on Windows doesn't support central, but supports middle which is still good.

<?xml version="1.0"?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;">
        XXX dominant-baseline: auto; XXX
    </text>

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;">
        XXX dominant-baseline: central XXX
    </text>
</svg>

Answer 1

One way to accomplish this in IE is to set the position related to the size of the font:

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text>

Setting the "dy" attribute will shift the text up (if value is negative) or down (if value is positive). Setting the "text-anchor" attribute centers the text on the x axis just fine in IE. Although this might hackish, but so is IE's support of SVG!