在 snap svg 中变换旋转

【问题标题】：Transform rotate in snap svg在 snap svg 中变换旋转
【发布时间】：2015-04-29 11:21:34
【问题描述】：

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

代码

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

rotating();

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

也很想看看这个动画是否可以无限期地重复。

【问题讨论】：

标签： javascript transform snap.svg rotatetransform

【解决方案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() 来创建一个无限循环。

【讨论】：

很棒的答案。谢谢。