Search code examples
javascriptjqueryhtmlsvgtoggleclass

jQuery having issues with textpath svg elements

I'm using SVG in my project and want to toggleClass with jQuery on the textpath elements when clicked.

So I was thinking about:

$("text#names > textpath").click(function() {
    $(this).toggleClass("newClass");
});

on HTML source:

<text id="names" class="clickthrough">
    <textpath class="zoom1" href="#text1" font-size="12.1"></textpath>
    <textpath ... </textpath>
</text>

but nothing happens. If I do $("text#names") I get the class clickthrough. So it is working, just the textpath is maybe not known to jQuery. So I found http://keith-wood.name/svgref.html but before using this, I would like to be sure if it is really needed for my case.

Solution

  • jQuery's .class doesn't work with SVG elements, you'll have to use attr instead:

    $("text#names > textpath").click(function() {
  $(this).attr("class", function(_, val){
    return (val.indexOf("newClass")+1) ? val.replace(" newClass","") : val+" newClass";
  });
});

    Check out the jsFiddle demo.