javascript - IE 上的 SVG 无法正确呈现

Question

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

我试图通过指定 arced <path> 来将弯曲的文本放置在圆弧上<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。

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

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

希望对您有所帮助。