在 snap svg 中变换旋转

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 中变换旋转

Transform rotate in snap svg

javascript

transform

snap.svg

rotatetransform