>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=393&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=2
<path> 태그 안에 패스 데이터를 나열하여 그립니다.
예)<path d="M 50 10 L 90 10 130 50 90 90 50 90 10 50 z"/>
d=패스 데이터 (패스의 외각선을 정의), pathLength=패스의 길이를 정의
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <path d="M 50 10 L 90 10 130 50 90 90 50 90 10 50 z" style="fill:navy; stroke:green; stroke-width:3;"/> </svg> |
SVG 보기 (path.svg)
패스 데이터를 표현할 때 다음과 같은 명령어들이 사용됩니다.
moveto : 시작점
lineto : 직선 그리기
cuveto : 곡선 그리기
arc : 타원이나 호 그리기
closepath : 시작점으로 직선을 그려서 패스 닫기
각 명령어는 패스 데이터에서 한 문자로 표현되며, 같은 명령어가 반복될 경우 후속 명령어는 생략합니다.
예) Moveto는 M으로 표시
moveto 명령
패스의 시작점을 설정합니다. 패스 데이터의 시작은 Moveto 또는 Arc 명령으로 시작해야 하며, 패스 데이터의 중간에 Moveto 명령이 나올 경우 새로운 서브 패스의 시작점이 됩니다.
명령어 | 이름 | 매개 변수 | 설명 |
M(절대 좌표)
m(상대 좌표) | moveto | (x y)+ | (x, y)에서 새로운 서브 패스를 시작합니다. m(소문자)는 상대 좌표를 나타냅니다. |
※표에서 ()는 매개 변수의 그룹을 의미하며 +는 하나 이상의 매개 변수를 필요로 함을 의미합니다.
closepath 명령
현재점으로부터 패스의 시작점으로 직선을 그려서 패스를 닫습니다.
명령어 | 이름 | 매개 변수 | 설명 |
Z 또는 z | closepath | 없음 | 현재점으로부터 시작점으로 직선을 그어 패스를 끝냅니다. |
lineto 명령
현재점으로부터 지정한 좌표까지 직선을 그립니다. Horizontal Lineto는 현재점으로부터 수평선을, Vertical Lineto는 수직선을 그립니다.
명령어 | 이름 | 매개 변수 | 설명 |
L(절대 좌표)
l(상대 좌표) | Lineto | (x y)+ | 현재점에서 (x, y)로 직선을 그립니다. |
H(절대 좌표)
h(상대 좌표) | Horizontal Lineto | x+ | 현재점(cpx, cpy)에서 (x, cpy)로 수평선을 그립니다. |
V(절대 좌표)
v(상대 좌표) | Vertical Lineto | y+ | 현재점(cpx, cpy)에서 (cpx, y)로 수직선을 그립니다. |
곡선을 그리는 3가지 명령어 그룹
3차원 베지어(Cubic Bezier) 명령 - 시작점과 끝점, 2개의 컨트롤 포인트로 정의됩니다.
2차원 베지어(Quadratic Bezier) 명령 - 시작점과 끝점, 1개의 컨트롤 포인트로 정의됩니다.
타원형 호(Elliptical arc) - 타원의 세그먼트에 의해 그려집니다.
Cubic Bezier curve 명령
현재점으로부터 지정한 좌표까지 3차원 베지어 곡선을 그립니다.
명령어 | 이름 | 매개 변수 | 설명 |
C(절대 좌표)
c(상대 좌표) | curveto | (x1 y1 x2 y2 x y)+ | 곡선의 첫 번째 컨트롤 포인트로 (x1, y1)을 이용하고 두 번째 컨트롤 포인트로 (x2, y2)를 이용하여 (x, y)로 베지어 곡선을 그립니다. |
S(절대 좌표)
s(상대 좌표) | shorthand/smooth curveto | (x2 y2 x y)+ | 현재점에서 (x, y)로 베지어 곡선을 그립니다. 첫 번째 컨트롤 포인트는 이전 곡선 명령 두 번째 컨트롤 포인트의 대칭점으로 추정합니다. 만일 이전 명령이 없거나 이전 명령이 C, c, S, s가 아닐 경우 현재점이 첫 번째 컨트롤 포인트가 되고 (x2, y2)가 두 번째 컨트롤 포인트가 됩니다. |
※ 아래 예제는 W3C 웹 사이트의 SVG 스펙 문서에 사용된 예제입니다.
<예제 cubic01>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
xmlns="http://www.w3.org/2000/svg">
<title>Example cubic01- cubic Bézier commands in path data</title>
<desc>Picture showing a simple example of path data using both a "C" and an "S" command,
along with annotations showing the control points and end points</desc>
<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 class="Connect" points="250,200 250,300" />
<polyline class="Connect" points="400,300 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 class="EndPoint" cx="250" cy="200" r="10" />
<circle class="EndPoint" cx="400" cy="200" r="10" />
<circle class="CtlPoint" cx="100" cy="100" r="10" />
<circle class="CtlPoint" cx="250" cy="100" r="10" />
<circle class="CtlPoint" cx="400" cy="300" r="10" />
<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"
style="text-anchor:middle">S400,300 400,200</text>
</svg> |
SVG 보기 (cubic01.svg)
<예제 cubic02>
3차원 베지어 곡선이 컨트롤 포인트의 위치에 따라 어떻게 변경되는지 보여주는 예제입니다.
SVG 보기 (cubic02.svg)
Quadratic Bezier curve 명령
현재점으로부터 지정한 좌표까지 2차원 베지어 곡선을 그립니다.
명령어 | 이름 | 매개 변수 | 설명 |
Q(절대 좌표)
q(상대 좌표) | quadratic bezier curveto | (x1 y1 x y)+ | 현재점에서 (x, y)점으로 2차원 베지어 곡선을 그립니다. 컨트롤 포인트는 (x1, y1)입니다. |
T(절대 좌표)
t(상대 좌표) | shorthand/smooth quadratic bezier curveto | (x, y)+ | 현재점에서 (x, y)점으로 2차원 베지어 곡선을 그립니다. 컨트롤 포인트는 이전 곡선 명령 두 번째 컨트롤 포인트의 대칭점으로 추정합니다. 만일 이전 명령이 없거나 이전 명령이 Q, q, T, t가 아닐 경우 현재점이 컨트롤 포인트가 됩니다. |
※ 아래 예제는 W3C 웹 사이트의 SVG 스펙 문서에 사용된 예제입니다.
<예제 quad01>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg">
<title>Example quad01 - quadratic Bezier commands in path data</title>
<desc>Picture showing a "Q" a "T" command,
along with annotations showing the control points
and end points</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M200,300 Q400,50 600,300 T1000,300"
fill="none" stroke="red" stroke-width="5" />
<!-- End points -->
<g fill="black" >
<circle cx="200" cy="300" r="10"/>
<circle cx="600" cy="300" r="10"/>
<circle cx="1000" cy="300" r="10"/>
</g>
<!-- Control points and lines from end points to control points -->
<g fill="#888888" >
<circle cx="400" cy="50" r="10"/>
<circle cx="800" cy="550" r="10"/>
</g>
<path d="M200,300 L400,50 L600,300
L800,550 L1000,300"
fill="none" stroke="#888888" stroke-width="2" />
</svg> |
SVG 보기 (quad01.svg)
Arc
현재점으로부터 타원형 호를 그립니다.
명령어 | 이름 | 매개 변수 | 설명 |
A(절대 좌표)
a(상대 좌표) | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 현재점에서 (x, y)로 타원형 호를 그립니다. 크기와 시작점은 (rx, ry)와 x-axis-rotation으로 결정되며, large-arc-flag와 sweep-flag로 호의 모양이 결정됩니다. |
※ 아래 예제는 W3C 웹 사이트의 SVG 스펙 문서에 사용된 예제입니다.
<예제 arcs01>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg">
<title>Example arcs01 - arc commands in path data</title>
<desc>Picture of a pie chart with two pie wedges and
a picture of a line with arc blips</desc>
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="1" />
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
</svg> |
SVG 보기 (arcs01.svg)
large-arc-flag
호의 중심각이 180도 이상일 경우 large-arc-flag가 1이 되고, 이하이면 0이 됩니다.
sweep-flag
sweep-flag가 1이면 호는 양수 각도 방향으로 그려지고, 0이면 음수 각도 방향으로 그려집니다.
<예제 arcs02>
large-arc-flag와 sweep-flag 값에 의해 다르게 표시되는 호의 모양을 보여주는 예제입니다.
SVG 보기 (arcs02.svg)
