在 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 和浏览器不知道它代表旋转。所以它所做的只是对矩阵中的值进行插值。