How to change SVG elements attributes using jQuery?

Question

I'm using SVG to display some animations. But being newbie at SVG I'm simmply using tried and tested jQuery animations for animating SVG elements such as rect and circle etc.

Now this is not a duplicate of jQuery Selector + SVG Incompatible? .. I want to change class of a <rect class="my-class-1 box" ...></rect> to <rect class="my-class-2 box" ....></rect>

I've tried normal jquery methods of addClass() and removeClass(). Which does not work due to their differences in DOM structure of HTML and SVG.

SO I'm using http://keith-wood.name/svgRef.html plugin to do the SVG element access and animation.

Stuck between rock and a hard place

Appreciate the help Thnx

jQuery-SVG by Keith Wood is a bit outdated. You should consider using [Raphael](http://raphaeljs.com/) instead. — ldiqual, Jun 17 '12 at 15:15
Or SVGWeb. D3.js also handles animations, but is primarily a data visualization framework. — Jared Farrish, Jun 17 '12 at 15:18
Thanks. Will take a look and see if those plugins can do what I want. — Rohan210, Jun 17 '12 at 15:37
Why can't you use pure javascript for that part of task only? — Alex, Jun 18 '12 at 09:52

score 0 · Answer 1 · answered Jun 18 '12 at 14:23

To accomplish this using the jQuery svg plugin, give the rect some custom ID property, and use that as the selector. Make sure you include jquery.svgdom.js as well.

svgCanvas.polygon(group, getPoints(), { customID:'123', stroke: 'orange', strokeWidth: 2, class: 'my-class-1' });

Now to change the class, use this selector:

var selector = 'svg polygon[customID="123"]';
$(selector).removeClass('my-class-1').addClass('my-class-2');

How to change SVG elements attributes using jQuery?

1 Answers1