Snap Svg

5/13

SVG 공부

1.Width,Height 설정

var s = Snap("100%",600);

이건 되는데

var s = Snap("100%","100%");

이건 안된다.

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 이동

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