SVG <rect>

SVG 형상

SVG는 개발자가 사용할 수 있는 몇 가지 предопределенные форменные элементы를 가지고 있습니다:

• 직사각형 <rect>
• 원 <circle>
• 원형 <ellipse>
• 직선 <line>
• 곡선 <polyline>
• 다각형 <polygon>
• 경로 <path>

다음 장에서는 rect 요소부터 각 요소를 설명할 것입니다.

SVG 직사각형 - <rect>

예제 1

<rect> 요소는 사각형 및 사각형 변형을 생성하는 데 사용됩니다：

이 SVG 코드는 다음과 같습니다：

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

직접 시도해 보세요

코드 설명:

• <rect> 요소의 width 및 height 속성은 사각형의 높이와 너비를 정의합니다
• style 속성은 사각형의 CSS 속성을 정의합니다
• CSS fill 속성은 사각형의 채우기 색을 정의합니다
• CSS border-width 속성은 사각형의 경계선 너비를 정의합니다
• CSS stroke 속성은 사각형의 경계선 색을 정의합니다

예제 2

또 다른 속성을 포함한 예제를 보겠습니다：

이 SVG 코드는 다음과 같습니다：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

직접 시도해 보세요

코드 설명:

• x 속성은 사각형의 좌측 위치를 정의합니다（예: x="50"은 좌측 외경에서 50px 떨어진 위치에 사각형을 배치합니다）
• y 속성은 사각형의 상단 위치를 정의합니다（예: y="20"은 상단 외경에서 20px 떨어진 위치에 사각형을 배치합니다）
• CSS fill-opacity 속성은 채우기 색의 불투명도를 정의합니다（유효 범위: 0에서 1까지）
• CSS border-opacity 속성은 선색의 불투명도를 정의합니다（유효 범위: 0에서 1까지）

예제 3

전체 요소의 불투명도를 정의합니다：

이 SVG 코드는 다음과 같습니다：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

직접 시도해 보세요

코드 설명:

• CSS opacity 속성은 전체 요소의 불투명도 값을 정의합니다（유효 범위: 0에서 1까지）

예제 4

마지막 예제에서는 둥글게 표현된 사각형을 생성합니다：

이 SVG 코드는 다음과 같습니다：

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

직접 시도해 보세요

코드 설명:

• rx와 ry 속성은 사각형의 모서리를 둥글게 만듭니다