기본 SVG 도형 rect circle path

SVG는 (0,0)이 왼쪽 위 모서리인 좌표계를 사용합니다. X 좌표는 오른쪽으로 증가하고 Y 좌표는 아래쪽으로 증가합니다. 뷰포트는 width 및 height 특성으로 정의되고, 좌표 공간은 viewBox 특성으로 정의됩니다.

다음과 같이 사각형을 그립니다: <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx와 ry는 모서리를 둥글게 만듭니다. 채우기와 윤곽선은 fill 및 stroke 특성이나 CSS로 제어합니다. x와 y를 생략하면 기본값은 0,0입니다.

다음과 같이 원을 그립니다: <circle cx="100" cy="100" r="50">. cx와 cy는 중심 좌표이고 r은 반지름입니다. SVG 원에는 canvas의 호 각도 매개변수에 해당하는 기능이 없습니다. 원은 항상 완전한 원으로 그려집니다.

다음과 같이 타원을 그립니다: <ellipse cx="100" cy="100" rx="80" ry="40">. rx는 가로 반지름이고 ry는 세로 반지름입니다. rx와 ry가 같은 타원은 원과 같습니다.

<line x1="0" y1="0" x2="100" y2="100">은 하나의 선분을 그립니다. <polyline points="0,0 100,50 200,0">은 여러 좌표 쌍을 지나며 연결된 선분을 그립니다. 둘 다 자동으로 닫히지 않습니다.

<polygon points="100,10 190,190 10,190">은 polyline과 비슷하지만 도형이 자동으로 닫힙니다. 즉, 마지막 점과 첫 번째 점을 선으로 연결합니다. 삼각형, 별 및 기타 정다각형처럼 닫힌 도형에는 polygon을 사용합니다.

path는 SVG에서 가장 강력한 도형으로, 선, 호, 곡선의 조합을 원하는 형태로 나타낼 수 있습니다. d 특성에는 경로 명령이 들어갑니다: M (moveTo), L (lineTo), A (호), C (3차 베지어 곡선), Q (2차 베지어 곡선), Z (closePath).

대문자 명령은 절대 좌표를 사용하고 소문자 명령은 상대 좌표를 사용합니다. M 100 50은 (100,50)으로 이동합니다. L 200 150은 (200,150)까지 선을 그립니다. Z는 경로를 닫습니다. A rx ry rotation large-arc sweep x y는 호를 그립니다.

SVG 도형은 CSS를 사용할 수 있습니다: fill, stroke, stroke-width, opacity, stroke-dasharray. 유지 관리하기 쉬운 스타일을 지정하려면 SVG 요소에 CSS 클래스를 사용합니다. SVG CSS 전환은 fill, stroke 및 opacity에 적용할 수 있어 상태를 부드럽게 변경합니다.

<g> 요소는 SVG 요소를 그룹으로 묶습니다. 그룹에 transform, fill 또는 stroke를 적용하면 모든 자식 요소에 영향을 줍니다. 그룹화를 사용하면 함께 이동하거나 변형되는 복잡한 도형을 합성할 수 있습니다. 예를 들어 시계 문자판과 그 모든 구성 요소를 하나로 묶을 수 있습니다.

<defs>에 기호, 그라디언트 및 클리핑 경로처럼 재사용할 도형을 정의합니다. <use href="#id">로 이를 참조합니다. 이렇게 하면 복잡한 경로 데이터를 중복하지 않아도 되고, use 요소를 통해 인스턴스 수준의 변형과 스타일 지정을 적용할 수 있습니다.

SVG에서 polyline과 polygon의 차이점은 무엇인가요?

SVG는 선언적인 도형 요소(rect, circle, ellipse, line, polyline, polygon)와 M, L, A, C, Q, Z 명령을 사용해 복잡한 도형을 표현하는 다목적 path 요소를 제공합니다. CSS 스타일 지정, g를 사용한 그룹화, defs/use를 통한 재사용을 활용하면 HTML에 직접 삽입되는 유지 관리가 쉽고 확장 가능한 벡터 그래픽을 만들 수 있습니다.