Internet Explorer 10不尊重SVG文本显性基线属性?

时间:2014-11-03 20:08:45

标签: internet-explorer 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>

如果我将text的{​​{1}}属性更改为dominant-baseline,则在Internet Explorer 10.0中呈现完全相同的内容。

在Chrome 38.0中,它会像我预期的那样移动。

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

然而,this Microsoft documentation使得它看起来甚至IE 9都支持该属性。

我的SVG文件(和演示文件)是否存在其他问题导致IE无效,或者我是否需要使用我的布局手动执行此操作?

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

2 个答案:

答案 0 :(得分:19)

根据{{​​3}},Internet Explorer 9,10,11和Edge(测试版)支持 dominant-baseline 。您唯一的选择是使用dy垂直手动定位。

答案 1 :(得分:3)

正如狙击手回答的那样,目前在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以实现另一个垂直对齐。