수색…
소개
경로는 SVG에서 가장 유연한 요소입니다. 패스는 연결된 스플라인에 배열 된 일련의 3 차 또는 2 차 베 지어 곡선입니다. 경로는 루프로 열리거나 닫히거나 여러 하위 구성 요소와 복잡 할 수 있습니다. 경로가 단순하지 않은 경우 채우기 규칙은 경로의 내부 또는 외부 영역을 결정하는 데 중요합니다.
경로는 일반적으로 자동 편집기에서 생성됩니다. 일반적으로 이차 경로는 글꼴에 사용되고 입체 경로는 그림에 사용됩니다.
매개 변수
| 속성 / 매개 변수 | 기술 |
|---|---|
| 디 | 모양을 만드는 일련의 그리기 명령을 정의합니다. 예 : d = "M 50,60 L50,60". 대문자 그리기 명령은 절대 좌표를 지정합니다. 소문자 드로잉 명령은 상대 좌표를 지정합니다. |
| (...) | 그림 그리기 명령 |
| m / M | 현재 도면 위치를 XY d = "M XY" |
| 1 / L | X, Y d = "L XY"에 선을 그립니다. |
| v / V | Y d = "V Y"에 수직선 그리기 |
| h / H | X d = "H X"에 수평선 그리기 |
| A / A | Rx와 Ry의 implied 반경과 X 축 회전으로 지정된 회전을 가진 X, Y에 호를 그립니다. 큰 원호 및 스윕 플래그는 이러한 구속 조건을 만족하는 4 개의 가능한 원호 중 어느 것이 선택되어야 하는지를 선택합니다. d = "A Rx Ry X 축 회전 (도) 대형 아크 플래그 (0/1) 스윕 플래그 (0/1) X, Y". |
| q / Q | 제어점 X1Y1을 사용하여 X, Y에 2 차 베 지어 곡선 그리기 d = "X1Y1 X Y" |
| t / T | 축약 된 2 차 베 지어 곡선을 그립니다 (제어점은 현재 도면 위치를 통해 이전 q / Q 도면 명령의 제어점을 반영하여 계산됩니다) |
| c / C | 제어점 X1, Y1 및 X2를 사용하여 X, Y로 입방 형 베 지어 곡선 그리기, Y2 d = "C X1Y1, X2Y2, XY" |
| s / S | 축약 형 3 차원 베 지어 곡선을 그립니다 (첫 번째 제어점은 현재 도면 위치를 통해 이전 c / C 도면 명령의 두 번째 제어점을 반영하여 계산됩니다). |
| - z / Z | 경로의 시작 부분에 선을 그려서 경로를 닫습니다 (이전에 다른 z가 사용 된 경우 경로 세그먼트) |
| (...) | (목록의 끝) |
| pathLength | (선택 사항) 작성자가 경로를 따라 텍스트와 같이 다른 계산에서 교정에 사용될 공칭 경로 길이를 지정할 수 있습니다. |
| 획 파라미터 | 모든 모양과 그림 요소에 공통 |
| 행정 | 경로 색 |
| 획 폭 | 경로 너비 |
비고
SVG path 요소에 대한 자세한 정보는 W3C SVG 권고안을 참조하십시오 .
L 경로 명령을 사용하여 대각선 파란색 선 그리기
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
결과:
H 그리기 명령을 사용하여 수평 주황색 선 그리기
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
결과:
l (상대 라인) 경로 명령을 사용하여 적색 십자를 그립니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
결과:
V 경로 명령을 사용하여 수직으로 녹색 선 그리기
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
결과:
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow