Transform Rotate In Snap Svg

Here is a JS FIDDLE where I am trying to rotate one of the cogwheel, but it rotates by moving to a different point. I tried different values to rotate it from the center without an

Solution 1:

You need to calculate the center of your object, so you rotate around the correct point.

var bbox = orange.getBBox(); //bounding box, get coords and centre

orange.stop().animate({ transform: "r360," + bbox.cx + ',' + bbox.cy }, 1000);

Here is a solution:

https://jsfiddle.net/cfogknc5/1/

You can just call setInterval() on your rotating function to make an infinite loop.