Question

I’m trying to rotate an SVG <polygon> (or any other element) using this:

var svg = new $.svg._wrapperClass($('#test'));
$(svg._svg).animate({svgTransform: 'rotate(720,100,100)'}, 2000);​

The polygon really changes its angle, but with some strange trajectory of moving.
Please, go to this link to see it: http://jsfiddle.net/ExaBP/

My goal is to make the polygon spinning around its center.

Answer 1

The problem is that the rotation center your polygon is on coord(0,0) > look at the points :

points="38.8313,102.22 42.1242,104.613 45.4171,107.005 44.1593,110.876 42.9015,114.747 38.8313,114.747 34.7611,114.747 33.5034,110.876 32.2456,107.005 35.5384,104.613"

So, if you use (cx,cy) for the rotation in animate, these parameters are also animate, from 0 to 100 then to 0.

You must change the center before and after the animation.

But here, I think you need a different approch :

• Try to create your SVG directly in the HTML or JS
• or try to modify the origin of coordonates in your drawing program before exportation.