경로(path)는 도형의 외곽선을 나타내며, 채우기 또는 스트로크(윤곽선)로 표현할 수 있습니다. 경로는 클리핑 경로로도 사용되거나, 애니메이션을 기술하거나, 텍스트 위치 지정에도 사용할 수 있습니다. 경로는 동시에 둘 이상의 기능에 사용할 수도 있습니다. (자세한 내용은 채우기, 스트로킹 및 페인트 서버, 클리핑 및 마스킹, 애니메이션 ('animateMotion'), 그리고 경로 위의 텍스트 참고.)
경로는 현재 점(current point)이라는 개념으로 설명됩니다. 종이에 그림을 그릴 때와 비슷하게 현재 점은 펜의 위치로 생각할 수 있습니다. 펜의 위치를 이동시키고, 펜을 직선 또는 곡선을 따라 움직여 도형의 외곽(열림/닫힘)을 그릴 수 있습니다.
경로는 객체 외곽의 기하를 나타내며, moveto(새로운 현재 점 설정), lineto(직선 그리기), curveto(큐빅 베지어 곡선 그리기), arc(타원 또는 원호), closepath(마지막 moveto로 연결해 도형 닫기) 명령으로 정의됩니다. 복합 경로(즉, 여러 서브패스를 가진 경로)도 가능하여, 객체 내에 "도넛 구멍"과 같은 효과를 줄 수 있습니다.
이 장에서는 SVG 경로의 문법, 동작 및 DOM 인터페이스를 설명합니다. SVG 경로의 다양한 구현 참고사항은 ‘path’ 요소 구현 참고사항에서 확인할 수 있습니다.
SVG에서 경로는 ‘path’ 요소로 정의됩니다.
기본 도형은 모두 해당 도형의 등가 경로가 무엇인지로 설명됩니다. 즉, 도형을 경로로 어떻게 표현하는지입니다. (‘path’ 요소의 등가 경로는 그 자체입니다.) 기본 도형을 등가 경로로 정의하기 위해, 세그먼트 완성 close path 연산이 정의되어 있으며, 이는 현재 기본 경로 문법으로는 표현할 수 없습니다.
‘path’ 요소의 도형 외곽선은 d 속성으로 지정합니다. 아래 경로 데이터 참고.
경로는 ‘path’ 요소를 포함하고, d 속성으로 경로 데이터를 지정하여 정의합니다. 경로 데이터에는 moveto, lineto, curveto(큐빅 및 쿼드 베지어 모두), arc, closepath 명령이 포함됩니다.
예시 triangle01 은 삼각형 모양의 경로를 지정합니다. (M은 moveto를, L은 lineto를, z는 closepath를 의미합니다.)
<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>예시 triangle01- 'path'의 간단한 예시</title>
<desc>삼각형을 그리는 경로</desc>
<rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
</svg>
예시 triangle01
경로 데이터에는 줄바꿈 문자가 포함될 수 있으므로 가독성을 높이기 위해 여러 줄로 나눌 수 있습니다. 마크업 내 속성의 줄바꿈은 파싱 시 공백 문자로 정규화됩니다.
경로 데이터의 문법은 파일 크기를 최소화하고 다운로드를 효율화하기 위해 간결하게 설계되었습니다. 많은 SVG 파일에서 경로 데이터가 주를 이루기 때문에 크기 최소화가 중요합니다. SVG에서 경로 데이터 크기를 최소화하는 방식은 다음과 같습니다:
M 100 100 L 200 200M100 100L200 200M 100 200 L 200 100 L -100 -200M 100 200 L 200 100 -100 -200경로 데이터 문법은 접두어 표기법(즉, 명령 다음에 매개변수)입니다. 허용되는 십진점은 유니코드 U+0046 FULL STOP (".") 문자(유니코드에서 PERIOD, dot, decimal point라 부름)뿐이며 다른 구분 문자는 허용되지 않습니다 [UNICODE]. (예: "13,000.56"과 같은 숫자는 경로 데이터 스트림에서 잘못된 값입니다. 대신 "13000.56"으로 작성해야 합니다.)
명령의 상대 버전에서는 모든 좌표값이 명령 시작점의 현재 점에 대해 상대적입니다.
아래 표에서 경로 명령 문법을 설명할 때 다음 표기를 사용합니다:
경로 명령 설명에서 cpx 및 cpy는 현재 점의 좌표를 의미합니다.
| 이름: | d |
|---|---|
| 값: | none | <string> |
| 초기값: | none |
| 적용 대상: | ‘path’ |
| 상속됨: | 아니오 |
| 백분율: | 해당 없음 |
| 미디어: | 시각적 |
| 계산된 값: | 명시된 대로 |
| 애니메이션 가능: | 예 |
d 속성은 ‘path’ 요소의 도형을 지정하는 데 사용됩니다.
none 값은 해당 요소에 경로 데이터가 없음을 의미합니다. ‘path’ 요소의 경우, 이는 요소가 렌더링되지 않으며 조상 컨테이너 요소의 경계 박스에도 영향을 주지 않음을 뜻합니다.
경로는 여러 세그먼트로 구성되며, 명시적 또는 암시적 모든 명령(단, moveto와 closepath 제외)은 하나의 경로 세그먼트를 정의합니다.
경로 데이터 내에서 지정한 모든 좌표 및 길이는 현재 사용자 좌표계에서 사용자 단위로 처리해야 합니다.
<string> 값은 경로 데이터 문자열로 도형을 지정합니다. <string> 값의 내용은 아래 svg-path EBNF 문법과 일치해야 하며, 문자열 내 오류는 경로 데이터 오류 처리 섹션 규칙에 따라 처리됩니다. 경로 데이터 문자열에 유효한 명령이 없으면 none 값과 동일하게 동작합니다.
애니메이션의 경우, 두 d 속성 값은 경로 데이터 문자열이 동일한 구조(즉, 경로 데이터 명령의 개수와 종류, 순서가 모두 같음)를 가질 때만 부드럽게 보간 가능합니다. 애니메이션이 지정되었으나 경로 데이터 명령 리스트 구조가 다르면, 보간은 불연속적(discrete) 애니메이션 타입으로 처리해야 합니다.
경로 데이터 명령 리스트 구조가 같으면, 각 명령의 각 파라미터는 실수(real number)로 개별적으로 보간해야 합니다. 플래그와 불리언은 0~1 사이 분수로 보간하며, 0이 아닌 값은 1/true로 간주합니다.
"d가 경로 데이터 문자열 값을 가지는 프레젠테이션 속성(이름 변경 없음)이 된다"는 결의가 London Editor's Meeting에서 이루어졌습니다.
아래 섹션에서는 경로 데이터 문자열에서 사용할 수 있는 명령들을 나열합니다. 직선 세그먼트를 그리는 명령에는 lineto 명령 (L, l, H, h, V, v) 와 close path 명령 (Z, z)가 있습니다. 아래 세 그룹 명령은 곡선을 그립니다:
"moveto" 명령(M, m)은 새로운 초기점과 새로운 현재 점을 설정해야 합니다. 이는 "펜"을 들어서 새로운 위치로 이동하는 것과 같습니다. 경로 데이터 세그먼트(있는 경우)는 반드시 "moveto" 명령으로 시작해야 합니다. 이후의 "moveto" 명령(즉, 첫 명령이 아닌 경우)은 새로운 서브패스의 시작을 의미합니다:
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| M (절대) m (상대) |
moveto | (x y)+ | 주어진 (x,y) 좌표에서 새로운 서브패스를 시작합니다. M(대문자)은 절대 좌표가 따라옴을, m(소문자)은 상대 좌표가 따라옴을 의미합니다. moveto 뒤에 여러 쌍의 좌표가 오면, 이후 쌍은 암시적 lineto 명령으로 처리됩니다. 따라서 moveto가 상대이면 암시적 lineto도 상대, moveto가 절대이면 암시적 lineto도 절대가 됩니다. 경로의 첫 요소로 상대 moveto(m)가 나타나면, 이는 절대 좌표 쌍으로 처리됩니다. 이 경우, 이후 좌표 쌍은 moveto가 절대로 해석되어도 상대로 처리됩니다. |
상대 m 명령을 사용할 때, 이동 위치는 (cpx + x, cpy + y)가 됩니다.
"closepath" (Z 또는 z)는 현재 서브패스를 초기점으로 다시 연결하여 끝냅니다. 현재 점에서 현재 서브패스의 초기점까지 자동으로 직선을 그립니다. 이 경로 세그먼트는 길이가 0일 수 있습니다.
"closepath" 다음에 바로 "moveto"가 오면, 그 "moveto"가 다음 서브패스의 시작점을 지정합니다. "closepath" 다음에 다른 명령이 바로 오면, 다음 서브패스는 현재 서브패스와 동일한 초기점에서 시작합니다.
서브패스가 "closepath"로 끝날 때, "lineto" 명령으로 "수동"으로 서브패스를 닫는 경우와는 ‘stroke-linejoin’ 및 ‘stroke-linecap’ 처리 방식에서 다릅니다. "closepath"를 사용할 경우, 서브패스의 마지막 세그먼트 끝과 최초 세그먼트 시작이 현재 ‘stroke-linejoin’ 값으로 "연결"됩니다. 반면 "lineto" 명령으로 수동으로 닫으면, 첫 세그먼트의 시작과 마지막 세그먼트의 끝은 연결되지 않고 각각 현재 ‘stroke-linecap’ 값으로 캡 처리됩니다. 명령이 끝나면 새로운 현재 점은 현재 서브패스의 초기점으로 설정됩니다.
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| Z 또는 z |
closepath | (없음) | 현재 서브패스를 현재 서브패스의 초기점으로 연결하여 닫음(위 설명 참고). Z와 z 명령은 매개변수를 가지지 않으므로 효과가 동일합니다. |
닫힌 서브패스는 반드시 "closepath" 명령으로 닫아야 하며, 이로써 첫 번째와 마지막 경로 세그먼트가 연결됩니다. 그 외의 경로는 열린 서브패스입니다.
닫힌 서브패스는 초기점이 마지막 좌표인 열린 서브패스와 동작이 다릅니다. 열린 서브패스의 첫/마지막 경로 세그먼트는 연결되지 않으며, 마지막 경로 세그먼트의 최종 좌표가 서브패스의 초기점이더라도 연결되지 않습니다. 이 경우, 첫/마지막 경로 세그먼트는 현재 stroke-linecap 값으로 캡 처리되고, stroke-linejoin 값으로 연결되지 않습니다.
"closepath" 다음에 바로 "moveto"가 오면, 그 "moveto"가 다음 서브패스의 시작점을 지정합니다. "closepath" 다음에 다른 명령이 바로 오면, 다음 서브패스는 현재 서브패스와 동일한 초기점에서 시작해야 합니다.
기본 도형을 등가 경로로 표현하기 위해, 곡선 도형을 추가 직선 세그먼트 없이 닫는 방법이 필요합니다(그 세그먼트가 길이 0이어도 마찬가지). 이를 위해 세그먼트 완성 close path 연산이 여기서 정의됩니다.
세그먼트 완성 close path 연산은 이전 경로 명령과 결합하며, 두 가지 효과가 있습니다:
세그먼트 완성 close path 연산은 현재 경로 데이터 문법에서 명령으로 지원되지 않습니다. 워킹 그룹은 향후 명세 버전에 이러한 문법 추가를 제안했습니다.
다양한 "lineto" 명령은 현재 점에서 새로운 점까지 직선을 그립니다:
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| L (절대) l (상대) |
lineto | (x y)+ | 현재 점에서 주어진 (x, y) 좌표까지 선을 그리며, 해당 좌표가 새로운 현재 점이 됩니다. L(대문자)은 절대 좌표, l(소문자)은 상대 좌표가 뒤따릅니다. 여러 쌍의 좌표를 지정해 폴리라인을 그릴 수 있습니다. 명령이 끝나면 새로운 현재 점은 마지막에 지정된 좌표 쌍입니다. |
| H (절대) h (상대) |
horizontal lineto | x+ | 현재 점에서 수평선을 그립니다. H(대문자)은 절대 좌표, h(소문자)은 상대 좌표가 뒤따릅니다. 여러 x 값을 지정할 수 있지만 일반적으로는 의미가 없습니다. H 또는 h 명령은 y 좌표를 0으로 지정한 L 또는 l 명령과 동일합니다. 명령이 끝나면 새로운 현재 점은 마지막 좌표 값입니다. |
| V (절대) v (상대) |
vertical lineto | y+ | 현재 점에서 수직선을 그립니다. V(대문자)은 절대 좌표, v(소문자)은 상대 좌표가 뒤따릅니다. 여러 y 값을 지정할 수 있지만 일반적으로는 의미가 없습니다. V 또는 v 명령은 x 좌표를 0으로 지정한 L 또는 l 명령과 동일합니다. 명령이 끝나면 새로운 현재 점은 마지막 좌표 값입니다. |
상대 l 명령을 사용할 때, 선의 끝점은 (cpx + x, cpy + y)입니다.
상대 h 명령을 사용할 때, 선의 끝점은 (cpx + x, cpy)입니다. 즉, h 명령에서 x가 양수면 양의 x축 방향으로 수평선을 그립니다.
상대 v 명령을 사용할 때, 선의 끝점은 (cpx, cpy + y)입니다.
큐빅 베지어 명령은 다음과 같습니다:
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| C (절대) c (상대) |
curveto | (x1 y1 x2 y2 x y)+ | 현재 점에서 (x, y)까지 큐빅 베지어 곡선을 그리며, (x1, y1)은 곡선 시작점의 제어점, (x2, y2)는 곡선 끝의 제어점입니다. C(대문자)는 절대 좌표, c(소문자)는 상대 좌표가 뒤따릅니다. 여러 좌표 집합을 지정해 폴리베지어를 그릴 수 있습니다. 명령이 끝나면 새로운 현재 점은 마지막 (x, y) 좌표 쌍입니다. |
| S (절대) s (상대) |
shorthand/smooth curveto | (x2 y2 x y)+ | 현재 점에서 (x, y)까지 큐빅 베지어 곡선을 그립니다. 첫 번째 제어점은 이전 명령의 두 번째 제어점을 현재 점 기준으로 반사한 점으로 가정합니다. (이전 명령이 없거나 이전 명령이 C, c, S, s가 아니면 첫 번째 제어점은 현재 점과 일치한다고 가정). (x2, y2)는 두 번째 제어점(즉, 곡선 끝 제어점)입니다. S(대문자)는 절대 좌표, s(소문자)는 상대 좌표가 뒤따릅니다. 여러 좌표 집합을 지정해 폴리베지어를 그릴 수 있습니다. 명령이 끝나면 새로운 현재 점은 마지막 (x, y) 좌표 쌍입니다. |
상대 c 또는 s 명령을 사용할 때, 각 상대 좌표 쌍은 m 명령과 동일하게 계산됩니다. 예를 들어 두 명령 모두 곡선의 마지막 제어점은 (cpx + x, cpy + y)입니다.
예시 cubic01은 경로 내에서 큐빅 베지어 명령을 간단하게 사용하는 예를 보여줍니다. 이 예제는 내부 CSS 스타일 시트를 통해 스타일 속성을 할당합니다. "S" 명령의 제어점은 이전 "C" 명령의 제어점을 "S" 명령의 시작점 기준으로 반사하여 자동으로 계산됩니다.
<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>예시 cubic01- 경로 데이터 내 큐빅 베지어 명령</title>
<desc>경로 데이터에서 "C"와 "S" 명령을 모두 사용한 간단 예시 그림.
제어점과 끝점을 보여주는 주석 포함</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>
예시 cubic01
아래 그림은 큐빅 베지어 곡선이 제어점 위치에 따라 어떻게 형태가 변하는지 보여줍니다. 처음 다섯 예시는 하나의 큐빅 베지어 경로 세그먼트를 나타냅니다. 오른쪽 아래 예시는 "C" 명령 뒤에 "S" 명령이 이어집니다.
쿼드 베지어 명령은 다음과 같습니다:
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| Q (절대) q (상대) |
쿼드 베지어 곡선(curveto) | (x1 y1 x y)+ | 현재 점에서 (x, y)까지 (x1, y1)을 제어점으로 하여 쿼드 베지어 곡선을 그립니다. Q(대문자)는 절대 좌표, q(소문자)는 상대 좌표가 뒤따릅니다. 여러 좌표 집합을 지정해 폴리베지어를 그릴 수 있습니다. 명령이 끝나면 새로운 현재 점은 마지막 (x, y) 좌표 쌍입니다. |
| T (절대) t (상대) |
축약/스무스 쿼드 베지어 곡선(curveto) | (x y)+ | 현재 점에서 (x, y)까지 쿼드 베지어 곡선을 그립니다. 제어점은 이전 명령의 제어점을 현재 점 기준으로 반사하여 자동으로 계산됩니다. (이전 명령이 없거나 이전 명령이 Q, q, T, t가 아니면 제어점은 현재 점과 일치한다고 가정). T(대문자)는 절대 좌표, t(소문자)는 상대 좌표가 뒤따릅니다. 명령이 끝나면 새로운 현재 점은 마지막 (x, y) 좌표 쌍입니다. |
상대 q 또는 t 명령을 사용할 때, 각 상대 좌표 쌍은 m 명령과 동일하게 계산됩니다. 예를 들어 두 명령 모두 곡선의 마지막 제어점은 (cpx + x, cpy + y)입니다.
예시 quad01은 경로 내에서 쿼드 베지어 명령을 간단하게 사용하는 예시를 보여줍니다. "T" 명령의 제어점은 이전 "Q" 명령의 제어점을 "T" 명령의 시작점 기준으로 반사하여 자동으로 계산된다는 점에 유의하세요.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>예시 quad01 - 경로 데이터 내 쿼드 베지어 명령</title>
<desc>그림: "Q", "T" 명령의 사용과 함께 제어점 및 끝점을 주석으로 표시함</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" />
<!-- 끝점 표시 -->
<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>
<!-- 제어점 및 끝점에서 제어점으로 연결선 -->
<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>
예시 quad01
| SVG 2 요구사항: | SVG 경로 문법에서 호(arcs)를 더 쉽게 그릴 수 있도록. |
|---|---|
| 결정: | 경로에서 호 그리기 쉽게 하기. |
| 목적: | 저자가 직접 호가 포함된 경로 데이터를 쉽게 작성할 수 있도록. |
| 담당자: | Cameron (ACTION-3151) |
타원호 명령은 다음과 같습니다:
| 명령 | 이름 | 매개변수 | 설명 |
|---|---|---|---|
| A (절대) a (상대) |
타원호(elliptical arc) | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ | 현재 점에서 (x, y)까지 타원호를 그립니다. 타원의 크기와 방향은 두 반지름(rx, ry) 및 x-axis-rotation으로 결정되며, 이는 전체 타원이 현재 좌표계에 대해 몇 도 회전되는지를 나타냅니다. 타원 중심(cx, cy)은 다른 매개변수의 제약을 만족하도록 자동으로 계산됩니다. large-arc-flag와 sweep-flag는 자동 계산에 관여하며 호가 어떻게 그려질지 결정합니다. |
상대 a 명령을 사용할 때, 호의 끝점은 (cpx + x, cpy + y)입니다.
예시 arcs01은 경로 내에서 arc 명령을 간단하게 사용하는 예시를 보여줍니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>예시 arcs01 - 경로 데이터 내 arc 명령</title>
<desc>파이 차트의 두 파이 조각과
호가 들어간 선 그림</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>
예시 arcs01
타원호 명령은 다음 제약을 만족하는 타원의 일부를 그립니다:
대부분의 상황에서 위 제약 조건을 만족하는 호는 실제로 4가지(2개의 서로 다른 타원, 각 타원마다 2가지 호 방향) 존재합니다. large-arc-flag와 sweep-flag는 그 중 어떤 호가 그려질지 결정합니다:
아래는 large-arc-flag와 sweep-flag의 4가지 조합에 따라 그려지는 4가지 서로 다른 호를 보여줍니다. 각 경우 다음 경로 데이터 명령을 사용했습니다:
<path d="M 125,75 a100,50 0 ?,? 100,50"
style="fill:none; stroke:red; stroke-width:6"/>
여기서 "?,?"는 "0,0", "0,1", "1,0", "1,1"로 바꿔 4가지 경우를 생성합니다.
경로 데이터의 타원호 명령에 대한 자세한 구현 참고사항은 범위 밖의 타원호 파라미터 섹션을 참고하세요.
구현 참고사항 부록에는 SVG arc 표기를 중심점 및 호 스윕 방식 포맷으로 변환해야 하는 소프트웨어를 위한 공식이 있습니다.
SVG 경로 데이터는 다음 EBNF 문법에 맞습니다.
svg_path::= wsp* moveto? (moveto drawto_command*)?
drawto_command::=
moveto
| closepath
| lineto
| horizontal_lineto
| vertical_lineto
| curveto
| smooth_curveto
| quadratic_bezier_curveto
| smooth_quadratic_bezier_curveto
| elliptical_arc
moveto::=
( "M" | "m" ) wsp* coordinate_pair_sequence
closepath::=
("Z" | "z")
lineto::=
("L"|"l") wsp* coordinate_pair_sequence
horizontal_lineto::=
("H"|"h") wsp* coordinate_sequence
vertical_lineto::=
("V"|"v") wsp* coordinate_sequence
curveto::=
("C"|"c") wsp* curveto_coordinate_sequence
curveto_coordinate_sequence::=
coordinate_pair_triplet
| (coordinate_pair_triplet comma_wsp? curveto_coordinate_sequence)
smooth_curveto::=
("S"|"s") wsp* smooth_curveto_coordinate_sequence
smooth_curveto_coordinate_sequence::=
coordinate_pair_double
| (coordinate_pair_double comma_wsp? smooth_curveto_coordinate_sequence)
quadratic_bezier_curveto::=
("Q"|"q") wsp* quadratic_bezier_curveto_coordinate_sequence
quadratic_bezier_curveto_coordinate_sequence::=
coordinate_pair_double
| (coordinate_pair_double comma_wsp? quadratic_bezier_curveto_coordinate_sequence)
smooth_quadratic_bezier_curveto::=
("T"|"t") wsp* coordinate_pair_sequence
elliptical_arc::=
( "A" | "a" ) wsp* elliptical_arc_argument_sequence
elliptical_arc_argument_sequence::=
elliptical_arc_argument
| (elliptical_arc_argument comma_wsp? elliptical_arc_argument_sequence)
elliptical_arc_argument::=
number comma_wsp? number comma_wsp? number comma_wsp
flag comma_wsp? flag comma_wsp? coordinate_pair
coordinate_pair_double::=
coordinate_pair comma_wsp? coordinate_pair
coordinate_pair_triplet::=
coordinate_pair comma_wsp? coordinate_pair comma_wsp? coordinate_pair
coordinate_pair_sequence::=
coordinate_pair | (coordinate_pair comma_wsp? coordinate_pair_sequence)
coordinate_sequence::=
coordinate | (coordinate comma_wsp? coordinate_sequence)
coordinate_pair::= coordinate comma_wsp? coordinate
coordinate::= sign? number
sign::= "+"|"-"
number ::= ([0-9])+
flag::=("0"|"1")
comma_wsp::=(wsp+ ","? wsp*) | ("," wsp*)
wsp ::= (#x9 | #x20 | #xA | #xC | #xD)
EBNF 처리 시, 해당 생성식을 최대한 많이 소비하고, 더 이상 생성식에 맞지 않는 문자가 나올 때 멈춥니다. 예를 들어 "M 100-200" 문자열의 "moveto" 명령의 첫 좌표는 "100"을 소비하다가, 마이너스 기호를 만나면 좌표 생성식에서는 마이너스가 숫자 뒤에 올 수 없으므로 멈춥니다. 결과적으로 첫 좌표는 "100", 두 번째 좌표는 "-200"이 됩니다.
마찬가지로 "M 0.6.5" 문자열의 "moveto" 명령의 첫 좌표는 "0.6"을 소비하다가 두 번째 소수점을 만나면, 좌표 생성식에서 소수점은 하나만 허용되므로 멈춥니다. 결과적으로 첫 좌표는 "0.6", 두 번째 좌표는 ".5"가 됩니다.
EBNF는 d 속성의 경로 데이터 문자열이 비어 있어도 허용합니다. 이는 오류가 아니며 경로 렌더링이 비활성화됩니다. d 속성 값이 none일 때도 렌더링이 비활성화됩니다.
만약 문법에 맞지 않는 경로 데이터를 만나면, 경로 데이터는 오류 상태가 됩니다(오류 처리 참고).
일부 기능(예: 마커의 방향, 마커, 캡 형태, 라인 캡의 모양)은 경로를 따라 특정 거리 또는 개별 세그먼트의 시작/끝에서의 경로 방향에 따라 정의됩니다.
경로의 지정된 거리에서의 경로 방향은 다음과 같이 정의됩니다:
경로 세그먼트의 시작 방향은 다음과 같이 정의됩니다:
경로 세그먼트의 끝 방향은 다음과 같이 정의됩니다:
규격을 준수하는 SVG 사용자 에이전트는 경로 데이터를 사용하는 기능을 다음 세부사항에 따라 구현해야 합니다:
불리언 플래그를 제외한 모든 타원호 파라미터에는 임의의 숫자 값이 허용되지만, 사용자 에이전트는 곡선이나 곡선의 기하를 렌더링할 때 잘못된 값에 대해 다음과 같이 조정해야 합니다:
세그먼트의 끝점(x, y)이 현재 점(예: 이전 세그먼트의 끝점)과 동일하면, 타원호 세그먼트는 완전히 생략된 것으로 간주합니다.
rx 또는 ry 중 하나가 0이면, 해당 호는 양 끝점을 잇는 직선 세그먼트("lineto")로 처리합니다.
rx 또는 ry가 음수이면, 부호를 제거하고 절대값을 사용합니다.
rx, ry, x-axis-rotation이 현재 점에서 새 끝점까지 도달할 수 없을 만큼 타원이 작을 경우(해결 방법 없음), 타원을 균등하게 확대해서 해법이 하나만 나오도록(타원이 딱 맞게 도달하도록) 만듭니다.
이 스케일링 연산의 수학 공식은 부록 범위 밖 반지름 보정에서 확인할 수 있습니다.
이런 관대한 일관된 처리 덕분에 다음이 보장됩니다:
S/s 및 T/t 명령은 해당 큐빅 베지어 세그먼트의 첫 번째 제어점이 이전 경로 세그먼트의 마지막 제어점을 현재 점 기준으로 반사하여 계산됨을 의미합니다. 정확한 수식은 다음과 같습니다.
현재 점이 (curx, cury), 이전 경로 세그먼트의 마지막 제어점이 (oldx2, oldy2)라면, 반사된 점 즉 (newx1, newy1)(현재 경로 세그먼트의 첫 제어점)은:
(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
= (2*curx - oldx2, 2*cury - oldy2)
길이 0인 경로 세그먼트도 유효하며, 다음 경우에 렌더링에 영향을 줍니다:
경로 위의 텍스트(text on a path), 이동 애니메이션, 다양한 스트로크 작업 등 여러 연산에서는 사용자 에이전트가 그래픽 요소(예: ‘path’)의 기하 구조를 따라 거리를 계산해야 합니다.
경로를 따라 거리를 계산하는 정확한 수학적 공식이 존재하지만, 매우 복잡하고 많은 계산이 필요합니다. 저작 도구와 사용자 에이전트는 가능한 한 정밀한 결과를 내는 알고리즘을 사용하는 것이 권장됩니다. 그러나 구현 차이를 허용하고, 거리 계산이 저자의 의도를 더 잘 반영할 수 있도록 ‘pathLength’ 속성을 사용해 경로 전체 길이에 대한 저자 계산값을 제공할 수 있습니다. 그러면 사용자 에이전트는 ‘pathLength’와 자체 계산한 전체 경로 길이의 비율로 거리 연산을 보정할 수 있습니다.
‘path’ 요소 내의 "moveto" 연산은 길이가 0으로 정의됩니다. 다양한 "lineto", "curveto", "arcto" 명령만이 경로 길이 계산에 기여합니다.
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| pathLength | <number> | (없음) | 예 |
경로 전체 길이에 대한 저자 계산값(사용자 단위). 이 값은 사용자 에이전트의 자체 경로 거리 측정 연산을 저자와 보정하는 데 사용합니다. 사용자 에이전트는 모든 경로 거리 연산을 ‘pathLength’ 와 자체 계산 경로 전체 길이의 비율로 보정합니다. ‘pathLength’는 경로 위의 텍스트, 이동 애니메이션, 다양한 스트로크 작업의 계산에 영향을 줄 수 있습니다.
0 값도 유효하며, 무한대 스케일링 인자로 처리해야 합니다. 0 값이 무한대로 스케일되어도 항상 0이어야 하며, 0보다 큰 비백분율 값은 +Infinity가 되어야 합니다.
음수 값은 오류입니다(오류 처리 참고).
‘pathLength’는 백분율 거리 연산에는 영향을 주지 않습니다.
SVGPathElement 객체는 DOM에서 ‘path’를 나타냅니다.
[Exposed=Window] interface SVGPathElement : SVGGeometryElement { };