[SVG] SVG로 사각형 그리기

SVG로 사각형 그리기

SVG를 사용하여 사각형을 그리는 것은 매우 간단합니다. SVG 내에서 사각형을 그리기 위해서는 <rect> 요소를 사용합니다. <rect> 요소는 다음과 같은 주요 속성을 가집니다:

• x와 y: 사각형의 시작 위치를 지정합니다. 이는 사각형의 왼쪽 상단 모서리의 좌표를 나타냅니다.
• width와 height: 사각형의 너비와 높이를 지정합니다.
• fill: 사각형의 채우기 색상을 지정합니다.
• stroke와 stroke-width: 사각형의 테두리 색상과 두께를 지정합니다.

사례

가로 100px, 세로 50px 크기의 빨간색 사각형을 그리려면 다음과 같은 SVG 코드를 사용할 수 있습니다.

caption: svg 코딩

<svg width="120" height="70" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="50" fill="red" />
</svg>

caption: 브라우저 결과

이 코드에서 width="120"와 height="70"는 SVG 캔버스의 크기를 지정합니다. x="10"와 y="10"은 사각형이 캔버스 내에서 어디에 위치할지를 결정합니다. 이 경우, 사각형은 캔버스의 왼쪽 상단 모서리에서 오른쪽으로 10px, 아래로 10px 떨어진 위치에 그려집니다. width="100"와 height="50"는 사각형의 너비와 높이를 각각 100px, 50px로 설정합니다. fill="red"는 사각형의 채우기 색상을 빨간색으로 지정합니다.

 

이러한 방식으로 SVG를 사용하여 다양한 크기, 색상, 위치의 사각형을 쉽게 그릴 수 있습니다.