How to center SVG text vertically in IE9 - svg

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!

Answer 2

This is a giant hack, but we can approximate the vertical middle position by taking the font size into account.
The specification defines central like that:
central
This identifies a computed baseline
that is at the center of the EM box.
We can take an EM box of known font size and measure its bounding box to compute the center.
<?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 id="default-text" x="20" y="100" font-size="5em">
M
</text>
<script>
window.onload = function() {
var text = document.getElementById("default-text"),
bbox = text.getBBox(),
actualHeight = (100 - bbox.y),
fontSize = parseInt(window.getComputedStyle(text)["fontSize"]),
offsetY = (actualHeight / 2) - (bbox.height - fontSize);
text.setAttribute("transform", "translate(0, " + offsetY + ")");
}
</script>
<path d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
<text id="reference-text" x="20" y="200" font-size="5em"
style="dominant-baseline: central;">
M
</text>
</svg>
Obviously, the code can be much cleaner, but this is just a proof-of-concept.

Answer 3

You could try baseline-shift to see if that works in IE9:
<?xml version="1.0"?>
<svg width="300" height="500" 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>
<path d="M 10 300 h 290" stroke="blue" stroke-width=".5" />
<text x="40" y="300" font-family="sans-serif" font-size="15">
<tspan style="baseline-shift:-30%;">
XXX baseline-shift: -30% XXX
</tspan>
</text>
</svg>
Firefox doesn't seem to support baseline-shift though, but Webkit and Opera do.