Justin McCandless

jQuery has a lot of convenient functions for working with the DOM, but if you've tried using it in a similar way with SVG, you may have noticed that for some things it just doesn't work. Digging into the bug tracking of jQuery shows that for some of the issues, there is actually not much interest in fixing this. Here I'll quickly go over a few options for circumventing this and some quick code to patch a few.

While there never seems to be enough information online about working with SVG in HTML5, a few resources do exist to help circumvent these problems.  If you want to avoid your problem altogether and use a full js library, Raphaël is one of the bigger and more well supported.  jQuery SVG also exists if you want to stick with jQuery and take the plugin route, which has some nice features and directly implements many of the broken functions.

When I ran into this problem, I had a smaller requirement for just a few specific functions.  I decided to hack together my own implementations instead of making the much more large-scale switch to Raphaël or jQuery SVG.  These just use simple string manipulation to get around the problem, which may not be exactly how jQuery would do it, but they got the job done fine in my case.

Update: Thanks a ton to Shaw in the comments for improving my code and adding a removeClass function.