CODEWITHSUNDEEP
jqueryinternet-explorersvg
pandronic
pandronic

Reputation: 651

Updating SVG text using jQuery in IE9-11

I'm trying to update the text on a SVG path using jQuery. It works fine in Firefox and Chrome, but in IE9 and IE11 (haven't tested on 10, but it's probably the same) the text is not updated. Any ideas/workarounds? This is my code so far:

<!DOCTYPE html>
<html>
  <head>
    <style>
      svg { background:url(_skins/cf/pics/ribbon.png); }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <div style="padding:20px; border:1px solid red; width:500px; height:400px;">
      <svg id="paglicaText" width="193" height="294" viewBox="0 0 193 294" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <path id="ribbonLeft" d="M 23 261 C 32 182, 44 98, 83 42"/>
        </defs>
        <!--<use xlink:href="#ribbonLeft" fill="none" stroke="red"/>-->
        <text font-family="Trebuchet MS" font-size="14" text-anchor="middle"><textPath xlink:href="#ribbonLeft" startOffset="50%" id="ribbonLeftText">Text text text</textPath></text>
      </svg>
      <script>
        $('#ribbonLeftText').html('bla bla bla');
      </script>
    </div>
  </body>
</html>

Upvotes: 2

Views: 1820

Answers (1)

pandronic
pandronic

Reputation: 651

I figured it out:

It's correct to use the textContent property instead of updating innerHTML, so the line:

$('#ribbonLeftText').html('bla bla bla');

becomes:

$('#ribbonLeftText').prop('textContent','bla bla bla');

And it works in all browsers.

Upvotes: 8

Related Questions