CODEWITHSUNDEEP
javascriptsvgrotationsnap.svg
Kyrsberg
Kyrsberg

Reputation: 440

Rotating object with Matrix.rotate in snap.svg morphs the object

I'm trying to use snap.svg library to rotate and move my object but I am getting this weird behavior where the object gets morphed.

http://codepen.io/anon/pen/vOwRga

var s = Snap.select("#svg");
var rect1 = s.select("#rect1");
var rect2 = s.select("#rect2");
var rotateMatrix = new Snap.Matrix();
rotateMatrix.rotate(180,302,495);

this.spin = function() {
 rect1.animate({transform:'r180,302,160'},5000,function(){
  rect1.animate({transform:'r0,302,160'},5000);
 });

 rect2.animate({transform: rotateMatrix},5000,function(){
  rect2.animate({transform: rotateMatrix.invert},5000);
 });
}

So here I'm rotating two different rectangles. First one works fine and the second one is where i try to use matrix. What am I doing wrong? Why is this happening? what is the meaning of life?

Upvotes: 0

Views: 597

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

In the first one, you are animating a rotation. Snap knows it is a rotation because of the way you have defined it with Snap's special 'r' initialiser.

In the second one you are just passing a matrix that describes a transform from one orientation to another. Snap, and the browser, have no idea that it represents a rotation. So all it is doing is interpolating the values in the matrix.

Upvotes: 1

Related Questions