スナップSVG回転＆スケール

Question

私は拡大縮小しようとしているし、三角形を回転させて、スナップ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軸上で少しずれているようですが、三角形は回転ポイントにとどまっていません。
どのように私はそれを修正することができますか？

EDIT：
私は解決策を見つけた [OK]を、LANのおかげで、あなたは正しかった、scaleingの中心は重要であり、
は、私はそれがオブジェクトの中心をuseingたと思ったが、それは左上隅ました。私はそれ
を調整し、今ではgreateの作品：

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：
は、私はあなたがそれらを使用すると、新しい変換を使用するたびに適用する必要はありませんので、変換を保存する方法を知りたいと思いました。イアンは古い変換を得るためにそうようなelement.transform()を使用することをお勧めします：

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

Answer 1

これはわずか1が期待するよりも複雑ですが、あなたは時々、いくつかの奇妙なことを行い、マトリックスを、アニメーション化されるだろう。

個人的には、スナップスの代替アニメーションメソッド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