IE上的SVG无法正确呈现

Question

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

我试图通过为<path> s

指定弧形<textpath>元素，将弧形文本放在圆弧上

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

添加以下＆＃39; meta＆＃39;如其他一些答案所建议的标签没有帮助。

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

Answer 1

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

一方面它看起来像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。

我希望这会有所帮助。