Question

这是JS FIDDLE，我试图旋转其中一个齿轮，但它会通过移动到另一个点来旋转。我尝试了不同的值来从中心旋转它而没有任何运气。任何帮助将非常感激。

代码

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

rotating();

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

也很想知道这个动画是否可以无限重复。

Answer 1

您需要计算对象的中心，以便围绕正确的点旋转。

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

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

这是一个解决方案：

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

你可以在旋转函数上调用setInterval（）来进行无限循环。

变换在snap svg中旋转

1 个答案: