Snap.svg 移动时旋转

【问题标题】：Snap.svg rotate while movingSnap.svg 移动时旋转
【发布时间】：2014-07-07 11:26:47
【问题描述】：

Svg.js 有一个很棒的功能，您可以同时为元素的 transform 属性的 translate 和 rotation 属性设置动画。换句话说，当物体在屏幕上移动时，它会围绕它自己的中心点旋转。如何在 Snap.svg 中做到这一点？

【问题讨论】：

【解决方案1】：

要在 Snap.svg 中执行此操作，请确保在转换字符串中的 translate 之后进行旋转。

var g, s, u;
s = Snap('#svgout');
u = s.rect(50, 50, 32, 32).attr({
    fill: 'none',
    stroke: '#000',
    strokeWidth: 4
});

// rotate the element about its own center
u.animate({
transform: 't100,100r360 ' + u.getBBox().cx +
' ' + u.getBBox(0).cy
}, 4000, mina.elastic);

Snap.svg rotate while moving
Svg.js rotate while moving

【讨论】：

你可以在没有组的情况下做到这一点，甚至只需将两个转换应用于元素...jsfiddle.net/4BBYG/7
谢谢。起初我尝试过，但我的顺序错误，在翻译前先旋转。 :p