Snap SVG 旋转和缩放

Question

我正在尝试缩放然后旋转一个三角形，然后将其转换到 Snap SVG 中的给定点。
我想围绕它的顶部而不是中心旋转三角形，这样我就可以做一个馅饼之类的东西。
所以我想我先缩放，然后旋转，然后再平移。

var t = new Snap.Matrix();
t.scale(0.5); 
t.rotate(45, bbox.cx, (bbox.cy-(bbox.h/2)));

但不知何故，缩放和旋转总是有点偏离。
我重用了一个我找到并更新的 jsfiddle，所以你可以看看我尝试了什么：
http://jsfiddle.net/AGq9X/477/
不知何故，bbox.cx 和 bbox.cy 不在三角形的中心。
在我的本地设置中它们是。
奇怪的是，没有缩放的旋转就可以正常工作， 但是缩放然后旋转似乎总是在 y 轴上有点偏离，三角形不会停留在旋转点。
有什么想法可以解决吗？

编辑：
好的，我找到了解决方案，感谢 lan，您是对的，缩放中心很重要，并且
我以为它在使用对象的中心，但它是左上角。我调整了它
现在效果更好了：

var bbox = obj.getBBox(); //get coords etc. of triangle object
var t = new Snap.Matrix();
var offset = (bbox.cy+(bbox.h)) - centerY; //translate Y to center,  
//depends on scaleing factor (0.5 = bbox.h, 0.25 = bbox.h*2)
t.scale(0.5, 0.5, bbox.cx, (bbox.cy+(bbox.h/2))); //scale object
t.translate(0,-offset); //translate to center
t.rotate(45, bbox.cx, (bbox.cy+(bbox.h/2))); //rotate object
obj.transform(t); //apply transformation to object  

EDIT2：
我想知道如何保存转换，因此您无需在每次使用新转换时都应用它们。 Ian 建议像这样使用element.transform() 来获得旧的转换：

element.transform( element.transform() + 's2,2' )

Answer 1

这比人们想象的要复杂一些，但是你会为一个矩阵制作动画，它有时会做一些奇怪的事情。

我个人会使用 Snaps 替代动画方法 Snap.animate() 而不是使用矩阵。首先设置比例，然后构建您的动画字符串。

有点像..

var triangle2 = p.select("#myShape2").transform('s0.5');

...

Snap.animate(0,90,function( val ) {
  triangle2.transform('r'+ val + ',' + bbox.cx+','+(bbox.cy-(bbox.h/2))+'s0.5')
}, 2000)

jsfiddle