Internet Explorer 10不支持SVG文本的dominant-baseline属性？

Question

以下是SVG文件：

<?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>

如果我将text的dominant-baseline属性更改为text-before-edge，在Internet Explorer 10.0中会呈现完全相同的效果。在Chrome 38.0中，它会移动到我期望的位置。 此演示页面旨在说明所有不同的dominant-baseline设置。 它在Chrome中也可以工作，但是在IE中，所有文本块都显示在同一y位置。

然而，这份Microsoft文档看起来甚至支持IE 9使用该属性。

我的SVG文件（和演示文件）是否还有其他无效之处使IE无法正常工作，或者我需要手动进行布局偏移？

我正在生成按绝对坐标布局的文件，因此，如果需要停止使用此基线属性并自行进行偏移，则不是一个很大的问题。

- japreiss

---

截至2015年7月12日，eweitnauer演示页面已经进行了前后反转（请检查他的源代码）。 - Pierre

那个微软的链接真的会重定向到 Mozilla 吗？ - Andreas Rejbrand

哈，看来是这样！链接地址在 msdn.microsoft.com 上。 - japreiss

Answer 1

dominant-baseline在Internet Explorer 9、10、11和Edge（beta）中不被支持，根据Microsoft的文档。你唯一的选择是使用dy手动垂直定位。

- rockpiper

Answer 2

如rockpiper所说，目前IE和Edge不支持此功能。但是有一些解决方法。

其中一个概念是计算边界客户矩形到父元素的偏移量(getBoundingClientRect)和属性y（主要用于定位）之间的差值。

然后您可以设置dy来调整垂直对齐方式。

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);

根据需求，您可以减去myText.getBoundingClientRect().height以实现另一种垂直对齐方式。

- spaark