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以實現另一個垂直對齊。