CODEWITHSUNDEEP
javascriptinternet-explorersvg
Nirmal Patel
Nirmal Patel

Reputation: 5168

SVG on IE not rendering correctly

I have this SVG created on JSFiddle: http://jsfiddle.net/nirmaljpatel/wtq9ocwp/

I am trying to get curved texts placed on circular arcs by specifying arced <path> elements for <textpath>s

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

It renders correctly on Chrome.

Screenshot of SVG Rendered on Chrome

However, the same on IE displays all the <text> elements incorrectly. Screenshot of SVG Rendered on IE11

Any ideas on how to get this working on IE? I am using IE11.

Adding the following 'meta' tag as suggested on some other answers did not help.

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

Upvotes: 2

Views: 2340

Answers (1)

U r s u s
U r s u s

Reputation: 6978

The information about IE support for the dominant-baseline attribute is pretty mixed.

On one hand it looks like IE supports the attribute.

On the other hand, none of the attribute values seem to be supported.

Following this answer, my advise is to set explicitly the value of y.

This ensures support across all the major browsers.

Your updated code would look like this

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

Check the updated demo.

I hope this helps.

Upvotes: 4

Related Questions