1.6 KiB
1.6 KiB
이제 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 |
🔹 핵심 정리 • 대문자 → 절대 좌표 (캔버스 기준) • 소문자 → 상대 좌표 (현재 위치 기준) • /은 시작점 이동, /은 직선, /는 곡선, 는 닫기