SVG path(패스)

svg 선 명령어

<path> 노드에는 다섯 개의 선 명령어가 있습니다.

Move

Line 명령어는 두 점 사이에 선을 그리는 역할을 합니다.
첫 번째 명령어는 ‘Move To(이동하기)’ 혹은 M 입니다.
이 명령어는 두 개의 파라미터로 x와 y 좌표를 받습니다.
그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않습니다.
‘Move To’ 명령어는 다음과 같이 패스의 맨 처음에 와서 그리기를 시작할 위치를 지정합니다.
M x y 혹은 m dx dy

참고 패스를 그릴때는 점이 나오지 않습니다.

선 그리기(lineTo)

일반적인 L이라 부르는 “Line To(선 그리기)” 명령어가 있습니다.
L 명령어는 x, y라는 두 개의 파라미터를 받아서 현재 위치에서 새 위치로 선을 긋습니다.
L x y (혹은 l dx dy)
L 및 l 명령은 현재 점에서 다음 점까지 직선을 그립니다. 대문자 L은 절대좌표, 소문자 l은 상대좌표입니다.

가로선과 세로선을 그리는 축약 명령어도 있습니다. H는 가로선(수평선)을 그리고, V는 세로선(수직선)을 그릴 수 있습니다.
H x (혹은 h dx)
H 및 h 명령은 현재 점에서 수평선을 그립니다. 대문자 H는 절대좌표, 소문자 h는 상대좌표입니다.
V y (혹은 v dy)
V 및 v 명령은 현재 점에서 수직선을 그립니다. 대문자 V은 절대좌표, 소문자 v은 상대좌표입니다.

Z라는 “Close Path(패스 닫기)” 명령어를 통해 쉽게 패스를 마무리할 수 있습니다.
이 명령어는 현 위치에서 시작점으로 직선을 그립니다.
항상은 아니지만 패스의 끝에 자주 쓰입니다.
Z (혹은 z)

커브 그리기(curve)

커브를 그리는 명령은 3가지가 있습니다. 각 커브 명령의 기본 개념을 알아보고, 이해를 위한 다이어그램을 살펴봅니다.
Cubic Bezier (C, c, S, s)
Quadratic Bezier (Q, q, T, t)
Elliptical arc (A, a)