Internet Explorer 10不重视SVG文本显性 - 基线属性？

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> 

恰好呈现在Internet Explorer 10.0相同的，如果我改变text的dominant-baseline属性text-before-edge。

在Chrome 38.0中，它按照我的预期移动。

This demo page应该说明所有不同的dominant-baseline设置。它也适用于Chrome，但所有文本块都显示在IE中相同的y位置。

但是，this Microsoft documentation使它看起来像IE 9支持该属性。

对于我的SVG文件（和演示文件），是否有其他无效的IE浏览器阻塞，还是我需要手动与我的布局？

我生成的文件放在绝对坐标中，所以如果我需要停止使用这个基线属性并进行自我偏移，这不是一个大问题。

Answer 1

dominant-baseline是不是由Internet Explorer 9,10,11和Edge（beta）根据this Microsoft documentation支持。您唯一的选择是使用dy垂直手动定位。

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以实现另一个垂直对齐。