Snap.svg边移动边旋转

Question

Svg.js有一个很棒的特性，您可以同时对元素的transform属性的平移和旋转属性进行动画处理。换句话说，当对象在屏幕上移动时，它围绕自己的中心点旋转。如何在Snap.svg中做到这一点呢？

Answer 1

若要在Snap.svg中执行此操作，请确保transform字符串中的rotate位于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