Search code examples
javascripttransformsnap.svgrotatetransform

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.

Solution

  • 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.