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 any luck. Any help will be very appreciated.

code

var s = Snap("#main");
var orange = s.select("#orgBearing");

rotating();

function rotating() {
    orange.stop().animate({
        transform: 'R360 126.7 126.7'
    }, 1000);
}  

Would also love to see if this animation can be made to repeat indefinitely.

回答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.

来源：https://stackoverflow.com/questions/29942214/transform-rotate-in-snap-svg