Internet Explorer 10 doesn't respect SVG text dominant-baseline attribute?

Question

The following SVG file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
    <g transform="translate(200, 200)">
        <text text-anchor="middle" dominant-baseline="text-after-edge">Why don't I move?</text>
    </g>
</svg>

Renders exactly the same in Internet Explorer 10.0 if I change the text's dominant-baseline attribute to text-before-edge.

In Chrome 38.0, it moves around as I would expect.

This demo page is supposed to illustrate all the different dominant-baseline settings. It also works in Chrome, but all the text blocks show up at the same y-position in IE.

However, this Microsoft documentation makes it look like even IE 9 supports the attribute.

Is there something else invalid about my SVG file (and the demo file) that makes IE choke, or do I need to do this manually with my layout?

I'm generating files laid out in absolute coordinates, so it's not a huge problem if I need to stop using this baseline property and do the offsetting myself.

Answer 1

dominant-baseline is not supported by Internet Explorer 9, 10, 11, and Edge (beta) according to this Microsoft documentation. Your only option is to manually position vertically using dy.

Answer 2

As rockpiper answered, it is not supported in IE nor in Edge at the moment. However there are workarounds.

One concept would be to calculate the difference between the offset to the parent of the bounding client rectangle (getBoundingClientRect) and the attribute y (which is mostly used for positioning).

Then you can set dy for adjusting the vertical alignement.

var parentElem = mySvg; // Set it to the closest SVG (or G) parent tag

var y = myText.hasAttribute('y') ? myText.getAttribute('y') : 0;
var dy = myText.hasAttribute('dy') ? myText.getAttribute('dy') : 0; 

dy += y - (myText.getBoundingClientRect().top - parentElem.getBoundingClientRect().top);

// This would cause to align it similarly to CSS 'vertical-align: top'
myText.setAttribute('dy', dy);

Depending on needs you can subtract myText.getBoundingClientRect().height for achieving another vertical alignement.