Internet Explorer 10 не поддерживает атрибут SVG-текст с доминирующей базой?

Следующий файл 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 он перемещается, как и следовало ожидать.

Эта демонстрационная страница должна иллюстрировать все различные настройки dominant-baseline. Он также работает в Chrome, но все текстовые блоки отображаются в одной и той же позиции в IE.

Однако эта документация Microsoft делает его похожим на то, что даже IE 9 поддерживает этот атрибут.

Есть ли что-то еще недействительное в моем SVG файле (и демо файле), которое заставляет IE задыхаться, или мне нужно сделать это вручную с помощью моего макета?

Я создаю файлы, выложенные в абсолютных координатах, так что это не огромная проблема, если мне нужно прекратить использовать это свойство базовой линии и сделать смещение самостоятельно.

Ответ 1

dominant-baseline не поддерживается Internet Explorer 9, 10, 11 и Edge (бета) в соответствии с этой документацией Microsoft. Ваш единственный вариант - установить вертикальное положение вручную, используя dy.

Ответ 2

Как ответил рокпипер, в настоящее время он не поддерживается ни в 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 для достижения другого вертикального выравнивания.