SVG 셰이프 태그 중에서 path가 가장 강력하며, 마스터링 경로만으로도 일반적인 드로잉 문제를 해결할 수 있습니다.
먼저 경로 태그의 기본 사용법을 살펴보겠습니다:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
경로 태그는 문자열로 구성된 정보를 정의하는 속성 d를 통해 경로를 정의하며, 채우기와 획 속성을 통해 채우기와 경계를 정의할 수도 있습니다.
d 속성의 정보는 사실 복잡하지 않으며, 문자와 숫자로 구성되어 있고, 숫자는 좌표점을 나타내고, 문자는 이 좌표점을 연결하는 역할을 합니다. 예를 들어, 위 예시에서 M은 시작점을, L은 직선 연결을 나타내므로, d의 정보는 다음과 같이 해석할 수 있습니다:
M100,100 -> (100,100) 좌표점에서 시작한다
L200,200 -> (100,100)에서 (200,200)까지 직선을 그립니다.
L200,400 -> (200,200)에서 (200,400)까지 직선을 그립니다.
경로 태그의 d 속성에는 총 10개의 명령어가 있으며, 다음 5개 명령은 기본적이고 비교적 간단합니다.
M은 (moveTo) x,y 시작 지점 좌표로 이동합니다
Z 클로즈패스는 경로의 시작점과 끝점을 직선으로 연결합니다
L 라인To: 현재 노드가 지정된 (x,y) 노드와 직선으로 연결되어 있습니다
H의 수평선 x는 현재 점의 y 좌표를 일정하게 유지하고, x축은 x로 이동하여 수평선을 형성합니다
V 수직선 y는 현재 점의 x 좌표를 변하지 않게 유지하며, y축은 y로 이동해 수직선을 형성합니다
M 및 L
M과 L의 또 다른 예를 살펴보겠습니다
<path d="M30,30 L170,30 L30,170 L170,170"></path>
A 지점(30, 30)에서 직선은 B 지점(170, 30)까지 그어지고, 그 다음 C 지점(30, 170), 그리고 D 지점(170, 170)까지 직진하여 마지막으로 Z자형 경로를 형성합니다.
채우기 효과, 그리고 Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
이 경로 설명에는 두 개의 M이 있어, 한 경로에는 두 개의 비교적 독립적인 경로가 나타나며, 첫 번째 경로는 위의 예와 동일하며 Z자형입니다.
두 번째 경로는 직사각형이며, 설명에 Z 명령어가 나타나 경로의 시작과 끝을 연결한다는 것을 나타냅니다.
또한, 여기서는 경로에 대한 채우기 속성을 정의하는데, 경로가 닫혀 있든 아니든 채우기가 효과가 발생한다는 것을 알 수 있습니다.
H와 V
마지막으로, H와 V라는 두 명령어를 살펴보겠습니다. 이 명령어는 x 또는 y축이 변하지 않을 때 L 명령어의 약어입니다. 따라서 다음 두 끝을 설명하고 그림은 동일합니다.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
게시됨 2017. 8. 14. 오후 1:15:15
|
|
|
