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

Question

我正在尝试使用 snap.svg 库来旋转和移动我的对象，但我遇到了对象变形的奇怪行为。

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

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

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

javascript

svg

rotation

snap.svg