키흐

var rect = s.rect(100,100,100,100);

rect.animate({

translate : 't100'

,500);

이렇게 하면 애니메이션 끝나고 나서 rect.attr("x");의 값이 당연히

200일 줄 알았는데 100이다;

이거땜에 밤새고..

Snap svg 튜토리얼 보는 중 내게 필요한 핵심 내용을 발견했다.

Tree의 연산을 시각화하여 일련의 연산들을 순차적으로 보여줘야하는데,

그것을 고민하던중 발견!

요지는 animate함수의 callback과 array에 내가 하려는 animate 내용들을 저장하는것...

이건 안된다.

CSS에서 height를 바로 100%로 하는 것이 불가하고 따로 작업이 필요하다고 한다.

2.Snap.transform

트랜스폼 문자열 형식

t x y : x,y로 이동.

여기서 x,y는 기존 위치에 대한 상대좌표.

r d x y : d만큼 회전한다 (x,y)를 중심으로

x,y는 생략가능

예시

var rect = s.rect(100, 100, 100, 100);

rect.transform('t0,0r45t0,0t0,0t0,0'); //기존 위치에서 0,0 이동후 45도 회전 후 0,0 이동 후 0,0 이동

레퍼런스 설명이 부족해서 데모를 보는게 더 유익한데, 몇몇개는 코드가 너무 길다;