转换在快照SVG中旋转 [英] Transform rotate in snap svg

问题描述

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

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.

代码

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.

推荐答案

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

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);

这是一个解决方案:

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

您只需在旋转函数上调用setInterval()即可进行无限循环.

You can just call setInterval() on your rotating function to make an infinite loop.

这篇关于转换在快照SVG中旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！