0

Svg.js has a great feature where you can animate the translate and the rotation properties of the transform attribute of an element at the same time. In other words, the object spins about its own center point as it moves across the screen. How is it possible to do this in Snap.svg?

Iktys
  • 840
  • 1
  • 8
  • 17

1 Answers1

1

To do this in Snap.svg, ensure that rotate comes after translate in the transform string.

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

Iktys
  • 840
  • 1
  • 8
  • 17
  • You could probably do it without a group even just apply both transforms to the element... http://jsfiddle.net/4BBYG/7/ – Ian Jul 07 '14 at 14:17
  • Thanks. I tried that at first, but I had the order wrong, with rotation before translate. :p – Iktys Jul 07 '14 at 14:52