path element
<path>#
path 요소는 가장 강력한 요소다. 선, 곡선, 호 등을 만드는데 사용할 수 있다. 또 path 요소는 여러개의 직선과 곡선을 결합해서 더 복잡한 모양을 만들수 있다.
명령 (command)#
path는 d 라는 기본 속성을 가지고 있고 d 속성에는 여러가지 명령(command)들과 인자(paramter)들을 포함한다. 이러한 명령들은 특정문자에 의해 구현된다. 예를 들어 이동(Move to) 명령을 위해 "M" 문자를 사용한다. 즉, (10, 10)위치로 이동 하고자 한다면 명령은 M 10 10이다.
모든 명령은 대문자인 경우와 소문자인 경우가 있는데 대문자는 절대좌표, 소문자는 상대좌표를 나타낸다.
라인 명령#
아래 path 에서 (10, 10)으로의 이동(Move to)명령은 커서의 시작점 위치 지정을 의미한다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^라인을 그리기 위한 세개의 명령이 있는데, L(l), H(h), V(v) 이다. 일반적으로 L x y는 "Line to"로 현재 위치(여기서는 커서의 시작점)에서 새로운 위치(x, y)로 라인을 그린다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^H와 V는 각각 가로, 세로 방향으로 수평선과 수직선을 그린다. 두 명령은 방향이 하나이므로 하나의 인자만 필요하다. 즉 H x V y 로 구성된다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Z명령은 경로의 명령을 약간 줄일 수 있는데, 현재의 위치에서 경로의 처음 시작점 즉, M 명령으로 시작된 위치까지 직선을 그립니다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^이런 명령들의 소문자 명령 즉, 상대 위치를 인자로 동일한 그림을 그릴 수 있습니다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^곡선 명령#
곡선을 만드는 명령의 종류는 세 가지가 있다. 두 가지는 베지어 곡선(Bézier Curves)을 그리는 명령이고 다른 하나는 호(arc)를 그리는 명령이다. C 와 S는 3차(cubic) 곡선을 그리는 명령이고 Q와 T는 2차(quadratic) 곡선을 그리는 명령이다. 베지어 곡선의 수학적 설명은 위키를 참고하면 된다. 호를 그리는 명령으로 A가 있다.
베지어 곡선 (Bézier Curves)#
C 명령 S 명령#
3차 곡선 - 큐빅 커브 C 명령은 하나의 포인트에 대해 두 개의 제어점을 사용한다. 따라서 곡선을 그리기 위해 직선의 양쪽 끝 지점에 각각의 제어점이 필요하게 되므로 총 세 세트의 좌표를 지정해야 한다.
여기서 마지막 x, y 는 선이 끝나는 지점이고 나머지 두 개는 제어점 이다. (x1, y1)은 곡선의 시작에 대한 제어점, (x2, y2)는 끝의 제어점이다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^S 명령#
여러개의 베지어 곡선을 함께 묶어 더 다양하고 부드러운 속선을 만들수 있다. 서로 다른 두 개의 제어점이 하나의 점을 기준으로 동일한 기울기를 유지하기 위해 다른쪽에서 사용되는 제어점을 반영하게 되는데 이 경우 S x2 y2, x y 명령을 사용할 수 있다. 다시말해 S 명령은 동일한 기울기를 예상해 추론에 의한 제어점을 만들어 C 명령을 생략한 단순한 명령이라 할 수 있다.
아래 예에서 파란색 가이드라인은 추론에 의해 만들어진 제어점을 의미한다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Q 명령 T 명령#
Q명령은 3차 곡선보다 단순하게 시작점과 끝점을 기준으로 기울기를 결정하는 하나의 제어점을 지정한다. 즉, 제어점과 곡선의 끝점 이라는 두 개의 좌표 매개변수가 필요하다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^T 명령#
3차 곡선 명령인 C, S 의 관계처럼 여러개의 2차 베지어 곡선을 묶어주기 위해 T 명령을 사용한다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^3차 곡선과 2차 곡선은 유사하지만 3차 곡선이 더 큰 자유도를 가지고 있다. 어떤 곡선을 결정할 것인가는 상황이나 선의 대칭정도에 따라 다르다.
호 (Arc)#
A 명령#
호는 원 또는 타원의 단면으로 A 명령으로 그린다.
rx, ry는 각각 호를 포함하는 원의 x축 반경과 y축 반경이다. 마지막 x, y 는 선이 끝나는 지점의 좌표로 이 네 개의 인자를 기본으로 호를 그려준다. 세 번째 인자는 호의 회전 각도를 정의한다. large-arc-flag 는 호가 180도 보다 클지 작을지를 결정한다. sweep-flag는 호가 양의 각도로 움직여야 하는지 음의 각도로 움직여야 하는지 결정하는데, 이는 본질적으로 두 원 중 어느 곳을 이동할 것인지를 선택한다. 아래 예는 각 경우에 대해 두 개의 원과 함께 가능한 네 가지 조합을 모두 보여줍니다.
SyntaxError: Unexpected token (1:8)
1 : return ()
^SyntaxError: Unexpected token (1:8)
1 : return ()
^SyntaxError: Unexpected token (1:8)
1 : return ()
^SyntaxError: Unexpected token (1:8)
1 : return ()
^