27 lines
1.6 KiB
Markdown
27 lines
1.6 KiB
Markdown
이제 SVG 명령어들을 한눈에 볼 수 있는 요약표를 만들어드릴게요. 과 처럼 대문자/소문자의 차이는 절대 좌표 vs 상대 좌표라는 점을 기억하시면 됩니다.
|
|
|
|
🔹 주요 Path 명령어 요약표
|
|
|
|
|
|
|
|
🔹 주요 Path 명령어 요약표
|
|
|
|
| 명령어 | 의미 | 대문자(절대) | 소문자(상대) | 예시 |
|
|
|--------|------|--------------|--------------|------|
|
|
| **M / m** | Move To (좌표 이동) | 지정한 좌표로 이동 | 현재 위치 기준으로 이동 | `M 10 20` / `m 10 20` |
|
|
| **L / l** | Line To (직선 그리기) | 지정 좌표까지 직선 | 현재 위치에서 상대 이동 직선 | `L 30 40` / `l 30 40` |
|
|
| **H / h** | Horizontal Line | 지정 x좌표까지 수평선 | 현재 위치에서 x축 상대 이동 | `H 50` / `h 50` |
|
|
| **V / v** | Vertical Line | 지정 y좌표까지 수직선 | 현재 위치에서 y축 상대 이동 | `V 60` / `v 60` |
|
|
| **C / c** | Cubic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `C x1 y1, x2 y2, x y` |
|
|
| **Q / q** | Quadratic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `Q x1 y1, x y` |
|
|
| **A / a** | Arc (호 그리기) | 절대 좌표로 원호 | 상대 좌표로 원호 | `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` |
|
|
| **Z / z** | Close Path | 현재 경로를 시작점과 연결해 닫기 | 동일 | `Z` |
|
|
|
|
|
|
|
|
|
|
🔹 핵심 정리
|
|
• 대문자 → 절대 좌표 (캔버스 기준)
|
|
• 소문자 → 상대 좌표 (현재 위치 기준)
|
|
• /은 시작점 이동, /은 직선, /는 곡선, 는 닫기
|