IE 上的 SVG 无法正确呈现

Question

我在 JSFiddle 上创建了这个 SVG：http://jsfiddle.net/nirmaljpatel/wtq9ocwp/

我正在尝试通过为 <textpath>s

指定弧形 <path> 元素来将弯曲的文本放置在圆弧上

<text font-size="18" font-family="Georgia" font-weight="bold" font-style="italic" fill="white">
    <textPath xlink:href="#txtHdr" font-size="20" startOffset="50%" text-anchor="middle" dominant-baseline="central" fill="#484848">Types of People</textPath>
    <a href="#">
        <textPath xlink:href="#txt1" startOffset="50%" text-anchor="middle" dominant-baseline="text-after-edge">Technical</textPath>
        <textPath xlink:href="#txt1" startOffset="50%" text-anchor="middle" dominant-baseline="text-before-edge">Knowledge</textPath>
    </a>
    <a href="#">
        <textPath xlink:href="#txt2" startOffset="50%" text-anchor="middle" dominant-baseline="central">Programmer</textPath>
    </a>
    <a href="#">
        <textPath xlink:href="#txt3" startOffset="50%" text-anchor="middle" dominant-baseline="central">Debugger</textPath>
    </a>
    <a href="#">
        <textPath xlink:href="#txt4" startOffset="50%" text-anchor="middle" dominant-baseline="central">A Tester</textPath>
    </a>
</text>
<text font-size="18"  font-family="Georgia" font-weight="bold" font-style="italic" fill="#c97">
    <tspan x="0" y="0" text-anchor="middle" dominant-baseline="text-after-edge">The</tspan>
    <tspan x="0" y="0" text-anchor="middle" dominant-baseline="text-before-edge">Master</tspan>
</text>

它在 Chrome 上正确呈现。

然而，在 IE 上同样显示所有 <text> 元素不正确。

关于如何让它在 IE 上运行有什么想法吗？我正在使用 IE11.

按照其他一些答案的建议添加以下 'meta' 标签没有帮助。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 1

有关 IE 对 dominant-baseline 属性的支持的信息非常复杂。

一方面看起来像 IE supports the attribute。

另一方面，none of the attribute values seem to be supported。

在 this answer 之后，我的建议是明确设置 y 的值。

这确保了对所有主要浏览器的支持。

更新后的代码如下所示

<text font-size="18"  font-family="Georgia" font-weight="bold" font-style="italic" fill="#c97">
     <tspan x="0" y="0" text-anchor="middle">The</tspan>
     <tspan x="0" y="20" text-anchor="middle">Master</tspan>
</text>

检查updated demo。

希望对您有所帮助。

IE 上的 SVG 无法正确呈现

SVG on IE not rendering correctly

javascript

internet-explorer

svg