2

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>

1 Answer 1

8

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.

2
  • 20minutes left to deploy visualisatoins on a national website, and I find this. THANK YOU!! Mar 1, 2015 at 17:16
  • 1
    I was originally using d3.text to set the text of a tspan, and it was setting it in the DOM, but not displaying it. I tried this alternative with textContent, and it didn't work :( but thankfully this issue wasn't affecting an important part of the visualisation. I wish Internet Explorer would just grow up and become a real browser.) Mar 1, 2015 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.