제5장. SVG Path

<path> 요소

<path d="패스 데이터" pathlength="길이">
- 임의의 모양을 묘사 - 연속된 점으로 외각선을 표현 (직선, 곡선, 원호 등)
- fill 과 stroke 등 스타일 지정이 가능 - 폐쇄형, 개방형

Path Data

대문자 기호는 절대좌표, 소문자 기호는 상대좌표
좌표값 사이는 공백이나 컴마 등 구분문자 사용

명령	내용	기호	매개변수
moveto	(no drawing)	M m	(x y)+
closepath	(끝점-시작점 사이 line)	Z z
lineto	General Line	L l	(x y)+
	Horizontal Line	H h	x+
	Vertical Lline	V v	y+
curveto	cubic Bezier	C c	(x1 y1 x2 y2 x y)+
	연속 cubic Bezier	S s	(x2 y2 x y)+
	Quadratic Bezier	Q q	(x1 y1 x y)+
	연속 Quadratic Bezier	T t	(x y)+
	Elliptical Arc	A a	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

예제

cubic Bezier curve

양끝점 (시작점), (끝점)과 두개의 제어점 (x1 y1), (x2 y2)으로 구성
- 예) <path d="M100,200 C100,100 400,100 400,200" />

연속 곡선 : C¹ & C² 연속 - 기울기 및 곡률/변화율이 연속되는 곡선
- 앞 곡선의 2번째 제어점(x2 y2)과 현재곡선의 첫째 제어점(x1 y1)이 일직선 & 같은 거리

(x1 y1)은 자동으로 계산
- x2 y2 만 지정

예) S 400 300 400 200

x1 y1 : 250 300 자동계산(청색점)
x2 y2 (회색점)
x y (흰색-끝점) <svg width="5cm" height="4cm" viewBox="0 0 500 400">
   <style type="text/css"><![CDATA[
      .Border { fill:none; stroke:blue; stroke-width:1 }
      .Connect { fill:none; stroke:#888888; stroke-width:2 }
      .SamplePath { fill:none; stroke:red; stroke-width:5 }
      .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
      .CtlPoint { fill:#888888; stroke:none }
      .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
      .Label { font-size:22; font-family:Verdana }
      ]]>
   </style>

   <rect class="Border" x="1" y="1" width="498" height="398" />

   <polyline class="Connect" points="100,200 100,100" />
   <polyline class="Connect" points="250,100 250,200" />
   <polyline . . . /> <polyline . . . 400,200" />
   <path class="SamplePath" d="M100,200 C100,100 250,100 250,200 S400,300 400,200" />

   <circle class="EndPoint" cx="100" cy="200" r="10" />
   <circle . . . /> <circle   . . . />
   <circle class="CtlPoint" cx="100" cy="100" r="10" />
   <circle   . . .   /> <circle   . . .   />
   <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
   <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
   <text class="Label" x="325" y="350"> S400,300 400,200</text>
</svg>

Quadratic Bezier curve

양끝점 (시작점), (끝점)과 한개의 제어점 (x1 y1)으로 구성

연속곡선의 경우 끝점만 표기 - 제어점은 C¹ & C² 연속되도록 자동 계산

예) Q400,50 600,300
예) T1000, 300

Elliptical Arc

매개변수 : A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- rx ry : Arc에 해당하는 타원의 반지름 (타원의 중심은 자동으로 계산)
- x-axis-rotation : x축 회전 각도
- large-arc-flag : 호의 각도가 180도 이상이면 1, 아니면 0
- sweep-flag : 호의 진행방향이 양의 각도이면 1 (시계방향), 음의 각도 방향이면 0
- x y : Arc의 끝점 (Arc의 시작점은 현재 위치)