SVG <path> 경로

path 요소는 형태를 정의하는 일반 요소입니다. 모든 기본 형태는 path 요소를 사용하여 생성할 수 있습니다. SVG <path> 요소는 직선, 원호, 곡선 등이 결합된 고급 형태를 그리기 위해 사용되며, 채우기 여부에 따라 있을 수 있습니다. 이 <path> 요소는 모든 요소 중에서 가장 혁신적이고 일반적인 SVG 형태일 수 있습니다. 또한 가장 어려운 요소일 수도 있습니다.

SVG 온라인 편집기 -　 SVG를 온라인으로 편집할 수 있으며, SVG를 소스 코드로 변환할 수 있습니다.

경로 예제

SVG <path> 간단한 예제:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50
　　　　　　　　　　　　　A30,30　0　0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>　　　　
</svg>

실행 후 결과는 다음과 같습니다:

이미지가 원호와 두 선이 포함되어 있고, 두 번째 선이 첫 번째 원호와 선과 연결되지 않는지 주목하세요.

모든 <path> 요소를 포함한 그리기는 d 속성에 지정됩니다. d 속성은 그리기 명령어를 포함합니다. 위의 예제에서 M은 'Move to'(이동할 장소) 명령어를 의미하며, A는 'Arc'(호)(弧形) 명령어를 의미하며, L은 'Line'(선) 명령어를 의미합니다. 이 명령어들은 가상의 펜에 제공됩니다. 이 펜은 이동하고, 도형을 그릴 수 있습니다.

펜 설정과 이동

<path> d 속성의 첫 번째 그리기 명령어는 항상 move 명령어여야 합니다. 어떤 것을 그릴 수 있기 전에, 가상의 펜을 어디쯤으로 이동해야 합니다. 이는 M 명령어로 완성됩니다. 다음은 간단한 예제입니다：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

이 예제에서 가상의 펜을50,50 점으로. 다음 그리기 명령어는 이 점에서 시작됩니다.

선

선을 그리는 것은 <path> 요소에 대해 가능한 가장 간단한 명령입니다. L과 l（소문자 L）명령어를 사용하여 선을 그립니다：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50          L100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

이 예제는 점50,50（M 명령어의 점）으로100,100（L 명령어의 점）로 선을 그립니다。 실행된 후 이미지 효과는:

L과 l 명령어의 차이점은 대문자 버전(L)이 명령어에 전달된 절대 좌표로 선을 그리는 반면, 소문자 버전(l)은 가상의 펜이 행 시작 전의 점에서의 절대 좌표를 더한 주어진 l 명령어의 좌표로 선을 그리는 것입니다. 상대 좌표는 가상의 펜이 행 시작 전의 점입니다.
가상의 펜이50,50，并且您使用l100,100 명령어를 사용하면 선이50+100,50+100=150,150.100,100 명령어는 선을 정확하게 그리는 데 사용됩니다.100,100。

가상의 펜을 그리기 이동

도형 경로는 항상 가상의 펜 포인트에서 새로운 점으로 그립니다. 각 그리기 명령어에는 종점이 있습니다. 이 명령어를 실행한 후, 가상의 펜 포인트는 그 그리기 명령어의 종점에 위치합니다. 다음 그리기 명령어는 이 점에서 시작됩니다.

곡선

圆弧는 <path> 요소를 사용하여 그려지며 A와 a 명령어로 완성됩니다. 선과 마찬가지로 대문자 명령어(A)는 절대 좌표를 종점으로 사용하며, 소문자 명령어(a)는 절대 좌표(시작점에서의 절대 좌표)를 사용합니다. 다음은 예제입니다：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50          A30,50　0　0,1　100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

실행 후 결과는 다음과 같습니다:

이 예제는 점50,50으로 이동한 점100,100（A 명령어에서 마지막으로 지정）로 곡선을 그립니다.
원주 반지름은 A 명령어에서 설정된 첫 번째 두 매개변수에 의해 설정됩니다. 첫 번째 매개변수는 x 방향의 반지름인 rx, 두 번째 매개변수는 y 방향의 반지름인 ry입니다. rx와 ry를 동일한 값으로 설정하면 원호가 생성됩니다. rx와 ry를 다른 값으로 설정하면 타원호가 생성됩니다.上面的例子에서 rx는30，ry设置为50。
在A命令上设置的第三个参数是x轴旋转(x-axis-rotation)。与正常的x轴相比，这将设置圆弧的x轴的旋转。在上面的示例中，x轴旋转设置为0。大多数情况下，您无需更改此参数。

第四和第五个参数是大圆弧标志(large-arc-flag)和扫描标志(sweep-flag)参数。大圆弧标志(large-arc-flag)决定是绘制满足起点、终点和rx和ry的较小或较大的圆弧。下面是一个绘制4个圆弧的示例，每个圆弧具有大圆弧标志(large-arc-flag)和扫描标志(sweep-flag)的不同组合：

<svg　width="500"　height="120">
　　　　<path　d="M40,20　　　　　A30,30　0　0,0　60,70"　style="stroke:　#cccc00;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　1,0　60,70"　style="stroke:　#ff0000;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　1,1　60,70"　style="stroke:　#00ff00;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　0,1　60,70"　style="stroke:　#0000ff;　stroke-width:2;　fill:none;"></path>
</svg>

실행 후 결과는 다음과 같습니다:

可以从40,20으로 이동한 점60,70绘制四个不同的弧。一个长弧，一个小弧以及每个小/大弧的两个镜像版本。大弧标记确定要绘制大弧还是小弧。扫描标志确定弧是否围绕从起点到终点的轴镜像。实际上，扫描标志控制弧的绘制方向（顺时针或逆时针），从而产生“镜像”效果。

绘制的第一个圆弧是黄色圆弧。将大圆弧标志设置为0意味着将绘制较小的可能圆弧。扫描标志也被设置为0，这意味着圆弧不会镜像。下面是黄色弧线：

绘制的第二个圆弧是红色圆弧。将大圆弧标志设置为1意味着绘制两个可能的圆弧中较大的一个，范围从40,20到60,70。下面是一起显示的黄色和红色弧线，以说明不同之处：

绿色和蓝色弧（来自前面的示例中所有四个圆弧）与黄色和红色圆弧相同，但绘制时扫描标志(sweep-flag)设置为1。这意味着它们将绘制相同的圆弧，但在从起点到终点的轴线上进行镜像。

이차 베塞尔 곡선

还可以使用 <path> 元素绘制二次 Bezier 曲线。绘制二次 Bezier 曲线是使用 Q 和 Q 命令完成的。与直线一样，大写命令(Q)使用绝对坐标作为其终点，而小写命令(q)使用相对坐标(相对于起点)。下面是一个简单的二次曲线示例：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="stroke:　#006666;　fill:none;"/></svg>

실행 후 결과는 다음과 같습니다:

이 예제는 두 번째 베塞尔 곡선을 그립니다,50,50으로 이동한 점100,100, 제어 점은50,200. 제어 점은 Q 명령에서 설정된 두 가지 매개변수 중 첫 번째 매개변수입니다.

제어 점은 곡선을 끌어당긴다. 곡선 위의 점이 제어 점에 가까울수록, 제어 점은 더 안쪽으로 끌어당겨지며, 이는 그 점이 제어 점에 더 가까워지는 것을 의미합니다. 제어 점을 그린 이미지의 예제가 다음과 같습니다:

실제로, 시작점에서 제어 점으로 이어지는 선을 그리고 제어 점에서 끝점으로 이어지는 선을 그리면, 첫 번째 선의 중간에서 두 번째 선의 중간까지는 곡선의 테이닝선입니다. 이 점을 설명하는 이미지가 있습니다:

셋차 베塞尔 곡선

C와 c 명령을 사용하여 셋차 베塞尔 곡선을 그립니다. 셋차 베塞尔 곡선은 두 번째 베塞尔 곡선과 유사하지만, 두 개의 제어 점이 하나의 제어 점보다 많습니다. 선과 마찬가지로, 대문자 명령(C)은 점을絶대 좌표로 사용하고, 소문자 명령(c)은 점을 점을 기준으로 상대 좌표로 사용합니다:

<path　d="M50,50　C75,80　125,20　150,50"
　　　　　　style="stroke:　#006666;　fill:none;"/>

이는 제어 점을 그린 결과 이미지이며, 실행 후 결과는 다음과 같습니다.

셋차 베塞尔 곡선을 사용하여 고급 곡선을 만들 수 있습니다:

경로 닫기

<path> 요소는 경로를 닫는 데 사용되며, 이는 그려진 마지막 점에서 첫 번째 점으로 돌아오는 선의 빠른 명령입니다. 이 명령은 Z(또는 z)-대문자와 소문자로 닫는 경로 명령어 사이에는 차이가 없습니다):

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　L100,50　L100,100　Z"
　　　　style="stroke:　#006666;　fill:none;"/></svg>

실행 후 결과는 다음과 같습니다:

명령어 조합

path 명령어를 동시에 <path> 요소에서 조합할 수 있습니다. 다음은 예제입니다:

<svg　width="500"　height="225">
　　　　<path　d="M100,100　L150,100　a50,25　0　0,0　150,100　q50,-50　70,-170　Z"　style="stroke:　#006666;　fill:　none;"></path>
</svg>

이 예제는 직선, 반지름, 두 번째 Bezier곡선을 그린 다음 경로를 시작점으로 돌아오는 직선으로 닫는 경로를 그립니다. 아래는 생성된 이미지입니다:

경로 채우기

fill CSS 속성을 사용하여 경로를 채울 수 있습니다. 다음은 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100　L150,100　L150,150　Z"
　　　　　　style="stroke:　#0000cc;
　　　　　　　　　　　　　stroke-width:　2px;      fill : #ccccff;"/></svg>

실행 후 결과는 다음과 같습니다:

형태의 내부는 연파랑색으로 채워진 것을 주의해 주세요.

기호

path 요소에서 기호를 사용할 수 있습니다. 기호는 경로의 시작점, 중간 및 끝에 위치한 작은 기호로 경로의 방향을 표시하는 데 사용됩니다. 예를 들어, 경로 시작점에는 원형이나 정方形이 있고, 끝에는 화살표가 있습니다.

기호 단축 방식

만약 같은 명령을 반복적으로 사용해야 한다면, 명령 문자를 생략하고 추가 파라미터만 제공하면 됩니다. 명령이 그대로 있는 것처럼. 이는 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

이 예제는 l 명령에 다른 파라미터를 전달하는 방법을 설명합니다. 이는 다른 경로 명령에도 적용됩니다. 아래는 생성된 이미지입니다:

Path 명령 전체 목록

아래는 SVG　path요소가능한 펜 명령 목록。각 명령은 하나의 문자와 그 명령의 파라미터로 구성된 일반적인 숫자(좌표 등)로 구성됩니다.대문자 명령은 일반적으로 절대 좌표를 해석합니다.소문자 명령은 일반적으로 현재 펜 위치에 대한 좌표 파라미터를 해석합니다.