Internet Explorer 10不尊重SVG文本优势基线属性吗? [英] Internet Explorer 10 doesn't respect SVG text dominant-baseline attribute?

问题描述

以下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中，它会如我所愿地移动.

此演示页面应该用于说明所有不同的dominant-baseline设置.它也可以在Chrome浏览器中使用，但是所有文本块在IE中都显示在相同的y位置.

但是，此Microsoft文档使它看起来很漂亮甚至IE 9都支持该属性.

我的SVG文件(和演示文件)是否还有其他导致IE阻塞的问题，还是我需要在布局中手动执行此操作?

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

根据此Microsoft文档.您唯一的选择是使用dy手动垂直放置.

The following SVG file:

<?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>

Renders exactly the same in Internet Explorer 10.0 if I change the text's dominant-baseline attribute to text-before-edge.

In Chrome 38.0, it moves around as I would expect.

This demo page is supposed to illustrate all the different dominant-baseline settings. It also works in Chrome, but all the text blocks show up at the same y-position in IE.

However, this Microsoft documentation makes it look like even IE 9 supports the attribute.

Is there something else invalid about my SVG file (and the demo file) that makes IE choke, or do I need to do this manually with my layout?

I'm generating files laid out in absolute coordinates, so it's not a huge problem if I need to stop using this baseline property and do the offsetting myself.

解决方案

dominant-baseline is not supported by Internet Explorer 9, 10, 11, and Edge (beta) according to this Microsoft documentation. Your only option is to manually position vertically using dy.

这篇关于Internet Explorer 10不尊重SVG文本优势基线属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！