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 축에서 약간 벗어난 것처럼 보입니다. 삼각형은 회전 점에 머 무르지 않습니다.
어떤 아이디어를 고칠 수 있습니까?

편집 :
나는 해결책을 발견 좋아, 랜 덕분에, 당신이 옳았, 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

이 약간 기대 한 것보다 더 복잡하지만, 때로는 몇 가지 이상한 일을 행렬을, 애니메이션 될 것이다.

개인적으로 나는 스냅 (Snap) 대체 애니메이션 메서드 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