Internet Explorer 10 不尊重 SVG 文本占主导地位的基线属性？答案

【问题标题】：Internet Explorer 10 doesn't respect SVG text dominant-baseline attribute?Internet Explorer 10 不尊重 SVG 文本占主导地位的基线属性？
【发布时间】：2014-12-30 14:01:12
【问题描述】：

以下 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 中，它会按照我的预期移动。

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

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

我的 SVG 文件（和演示文件）是否还有其他无效的内容导致 IE 阻塞，或者我需要手动使用我的布局来执行此操作？

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

【问题讨论】：

截至 2015 年 7 月 12 日，eweitnauer 演示页面前后颠倒（查看他的来源）。
那个微软链接真的会重定向到 Mozilla 吗？
哈，显然是这样！链接地址在msdn.microsoft.com。

标签： internet-explorer svg

【解决方案1】：

根据this Microsoft documentation，

dominant-baseline不受 Internet Explorer 9、10、11 和 Edge（测试版）支持。您唯一的选择是使用 dy 手动垂直定位。

【讨论】：

【解决方案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 以实现另一个垂直对齐。

【讨论】：