Блог

Svg.js имеет отличную функцию, с помощью которой вы можете одновременно анимировать свойства translate и rotation атрибута transform элемента. Другими словами, объект вращается вокруг своей собственной центральной точки при перемещении по экрану. Как это возможно сделать в Snap.svg?

Чтобы сделать это в 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 при перемещении
Svg.js поворот при перемещении