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

Question

The following SVG file:

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.