Snap.svg在移动时旋转

Question

Svg.js有一个很棒的功能，你可以同时为元素的transform属性的translate和rotation属性设置动画。换句话说，当物体在屏幕上移动时，物体围绕其自身的中心点旋转。如何在Snap.svg中执行此操作？

Answer 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