Mingg's Diary

Path

SVG 경로 – <path>

<path> 요소는 경로를 정의하는 데 사용된다.
경로는 여러 개의 직선이나 곡선을 조합하여 단순하거나 복잡한 모양을 만들 때 사용된다.

<path> 요소에는 경로를 그리는 방법과 점을 정의하는 하나의 기본 속성이 있다.

속성명	설명
d	필수. 경로를 정의하는 명령어들의 집합.

경로 데이터에 사용할 수 있는 명령어들은 다음과 같다.

M = moveto (한 점에서 다른 점으로 이동)
L = lineto (선 그리기)
H = horizontal lineto (수평선 그리기)
V = vertical lineto (수직선 그리기)
C = curveto (곡선 그리기)
S = smooth curveto (부드러운 곡선 그리기)
Q = quadratic Bézier curve (2차 베지에 곡선 그리기)
T = smooth quadratic Bézier curveto (부드러운 2차 베지에 곡선 그리기)
A = elliptical Arc (타원 호 그리기)
Z = closepath (경로 닫기)

참고: 위 명령어들은 대문자와 소문자 모두 사용할 수 있다.
대문자는 절대 좌표를 의미하고, 소문자는 상대 좌표를 의미한다.

간단한 경로

위치 (150, 5)에서 시작하여 (75, 200)으로 선을 그리고, 다시 (225, 200)으로 선을 그린 후 마지막으로 경로를 닫아 (150, 5)로 돌아오는 경로를 정의한다.

<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<path d="M150 5 L75 200 L225 200 Z" style="fill:none;stroke:green;stroke-width:3" />

</svg>

<d> 속성은 경로를 그리기 위한 명령어와 좌표들의 집합을 정의한다.

베지에 곡선

베지에 곡선 (Bézier Curve)은 무한대로 확장될 수 있는 부드러운 곡선을 모델링하는 데 사용된다.
일반적으로 사용자는 두 개의 끝점과 하나 또는 두 개의 제어점을 선택한다.
하나의 제어점을 가진 베지에 곡선을 2차 베지에 곡선이라고 한다.

2차 베지에 곡선을 생성하며, A와 C는 시작점과 끝점이고, B는 제어점이다.

A B C

<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<!-- Draw the paths -->

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>

<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>

<path id="lineMID" d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>

<path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/>

<!-- Mark relevant points -->

<g stroke="black" stroke-width="3" fill="black">

<circle id="pointA" cx="100" cy="350" r="4" />

<circle id="pointB" cx="250" cy="50" r="4" />

<circle id="pointC" cx="400" cy="350" r="4" />

</g>

<!-- Label the points -->

<g font-size="30" font-family="sans-serif" fill="green" text-anchor="middle">

<text x="100" y="350" dx="-30">A</text>

<text x="250" y="50" dy="-10">B</text>

<text x="400" y="350" dx="30">C</text>

</g>

</svg>