[SVG] 기본 도형 그리기

See the Pen [SVG] 도형 그리기 by mill (@millfeel) on CodePen.

---

사각형

<rect x="8" y="8" width="100" height="100" />
<rect x="116" y="8" width="100" height="100" rx="4" ry="4" />

• x: x 좌표 값
• y: y 좌표 값
• rx: 라운드 x 값
• ry: 라운드 y 값
• width: 가로
• height: 세로

---

원

<circle cx="66" cy="182" r="50" />

• cx: 원의 x 좌표 값
• cy: 원의 y 좌표 값
• r: 원의 반지름

---

타원

<ellipse cx="91" cy="298" rx="75" ry="50" />

• cx: 원의 x 좌표 값
• cy: 원의 y 좌표 값
• rx: 타원 중심의 x 위치
• ry: 타원 중심의 y 위치

---

선

<line x1="250" x2="350" y1="16" y2="160" stroke="black" />

---

폴리 라인

<polyline points="166 116, 216 216, 116 216" stroke="red" stroke-width="4" />

---

폴리곤

<polygon points="224 116, 324 116, 274 216"  stroke="red" stroke-width="4" />

---

Q. 폴리 라인과 폴리곤의 차이는?

마지막 점을 첫 번째 점과 자동으로 연결하여 닫히는가의 차이

• 폴리 라인 - 닫히지 않음.
• 폴리곤 - 닫힘.

*페이지 상단에 첫번째에 있는 코드펜을 참고하세요.

---

[공부 좌표]

developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes