Jquery toggleClass on inline SVG

Question

I've got a layout with an inline SVG (an archaeological drawing of a site's floor plant) with some explanatory text in a sidebar and I would like to change some of the attributes of the groups I've made inside the SVG by toggling the classes of the different groups.
I'm trying to use JQuery's toggleClass() but it is not working. I would like to bind the changes on the class to some click events on <span> elements on the sidebar.
Does Jquery not work with SVG?

Answer 1

No. jQuery is designed to work with HTML. SVG elements are in the SVG namespace and the jQuery functions generally don't work on them.

You can modify an SVG element's class using setAttribute():

mysvgelement.setAttribute("class", someclass);

Or use one of the various JS support libraries for SVG manipulation.