그리기
SVG는 직사각형(rect), 원(circle), 타원(ellipse), 직선(line), 폴리라인(polyline), 다각형(polygon)과 같은 기본 모양을 그릴 수 있는 요소 세트를 제공합니다.
이번 포스팅에서는 위에 설명한 도형이 아닌, path를 이용해서 도형을 그리겠습니다.
패스 데이터(Paths Data)
패스 데이터(d) 속성은 복잡한 도형의 모양을 그리는데 사용됩니다. 속성 값을 보면 상당히 복잡합니다.
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>이동(moveTo)
moveTo명령(M,m)은 이동 명령입니다. 즉, 패스의 시작이며 대문자 M은 절대 좌표, 소문자 m은 상대좌표를 의미합니다.
패스 도형을 그리기 위한 시작점(123.456,78)으로 절대좌표 위치를 이동(M)하려면 다음과 같이 작성합니다.
<path d="M10 10" />패스 닫기(closepath)
closepath 명령(Z,z)는 패스 그리기를 종료하는 명령입니다. 그리기가 종료되면 현재 점에서 시작점까지 직선을 그립니다. closepath명령 뒤에 moveTo 명령이 있을 경우, 이전 패스 그리기를 종료한 후 새로운 패스 그리기 시작점으로 이동합니다. 패스 닫기의 경우 대소문자 구분없이 사용합니다.
<path d="M10 10z" />선 그리기(lineTo)
lineTo 명령은 직선, 수평선, 수직선을 그릴 수 있습니다. 명령을 통해서 현재 점에서 새 점으로 선을 그립니다.
- 직선 : L 및 l 명령은 현재 점에서 다음 점까지 직선 그림
(L : 절대좌표, l : 상대좌표)
L x y (l dx dy)- 수평선 : H 및 h 명령은 현재 점에서 수평선 그림
(H : 절대좌표, h : 상대좌표)
H x (h dx)- 수직선 : V 및 v 명령은 현재 점에서 수직선 그림
(V : 절대좌표, v : 상대좌표)
V y (v dy)커브 그리기(curve)
커브를 그리는 명령으로는 큐빅 베지어(C, c, S, s), 쿼드라틱 베지어(Q, q, T, t), 엘립티컬 아크(A, a)가 있습니다.
위와같이 베지어 곡선의 종류는 무한하지만, 패스 엘리먼트는 C(Cubic), Q(Quadratic) 베지어 곡선만 포함합니다.
- Q (Quadratic) : 2차 베지어 곡선, 하나의 제어점이 시작점과 끝점의 방향을 결정
(Q : 절대좌표, q : 상대좌표)
Q x1 y1, x y (q dx1 dy1, dx dy)- C (Cubic) : 3차 베지어 곡선, 두개의 제어점
(C : 절대좌표, c: 상대좌표)
C x1 y1, x2 y2, x y (c dx1 dy1, dx2 dy2, dx dy)- T : 2차 베지어 곡선 Q를 연결하는 단축 명령어, 이전에 사용한 제어점으로부터 새로운 제어점을 자동으로 만듦
(T : 절대좌표, t: 상대좌표)
T x y (t dx dy)- S : 3차 베지어 곡선 명령어로 대칭성이 있는 곡선 만들 때 사용, C나 S다음에 오게 되면 이전에 사용했던 마지막 제어점의 반대 방향으로 첫 제어점 사용
(S : 절대좌표, s: 상대좌표)
S x2 y2, x y (s dx2 dy2, dx dy)- A (Arc) : 많은 파라미터를 받아서 사선을 그림
A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y예제
path animation
path 태그에 animate태그를 삽입해서 애니메이션을 표현할 수 있습니다.
animate 태그의 value 속성에 애니메이션 되길 바라는 d 속성 값을 이어서 작성한 후 세미콜론(;)으로 마무리하고 dur속성에 애니메이션 실행 시간을 적어주면 value의 값으로 애니메이션이 동작합니다.
예제
동일한 물컵에 푸른물과 붉은물을 담아서, 푸른물을 덜 역동적으로 흔들리게, 붉은물은 더 역동적으로 흔들리도록 표현했습니다.
예제에 대한 모든 코드는 Git에서 확인 가능합니다.
