使用snap.svg中的Matrix.rotate旋转对象会变形对象

Question

我正在尝试使用snap.svg库来旋转和移动我的对象，但是我得到了这个奇怪的行为，其中对象被变形。

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);
 });
}

所以我在这里旋转两个不同的矩形。第一个工作正常，第二个是我尝试使用矩阵。 我究竟做错了什么？为什么会这样？生命的意义是什么？

Answer 1

在第一个中，您正在设置旋转动画。 Snap知道它是一个旋转，因为你用Snap的特殊'r'初始化器定义了它。

在第二个中，您只是传递一个矩阵，该矩阵描述了从一个方向到另一个方向的转换。 Snap和浏览器不知道它代表一个轮换。所以它所做的只是在矩阵中插值。