SVG <직사각형>

SVG 모양

SVG에는 개발자가 사용할 수 있는 몇 가지 미리 정의된 모양 요소가 있습니다.

• 직사각형 <직사각형>
• 원 <원>
• 타원 <타원>
• 라인 <라인>
• 폴리라인 <폴리라인>
• 폴리곤 <폴리곤>
• 경로 <경로>

다음 장에서는 rect 요소부터 시작하여 각 요소에 대해 설명합니다.

SVG 직사각형 - <직사각형>

실시예 1

<rect> 요소는 직사각형과 직사각형 모양의 변형을 만드는 데 사용됩니다.

다음은 SVG 코드입니다.

코드 설명:

• <rect> 요소의 너비 및 높이 속성은 사각형의 높이와 너비를 정의합니다.
• style 속성은 사각형의 CSS 속성을 정의하는 데 사용됩니다.
• CSS 채우기 속성은 사각형의 채우기 색상을 정의합니다.
• CSS stroke-width 속성은 사각형 테두리의 너비를 정의합니다.
• CSS 획 속성은 사각형 테두리의 색상을 정의합니다.

실시예 2

몇 가지 새로운 속성이 포함된 다른 예를 살펴보겠습니다.

다음은 SVG 코드입니다.

코드 설명:

• x 속성은 사각형의 왼쪽 위치를 정의합니다(예: x="50"은 사각형을 왼쪽 여백에서 50픽셀 위치에 배치).
• y 속성은 직사각형의 상단 위치를 정의합니다(예: y="20"은 상단 여백에서 20픽셀 떨어진 직사각형 위치).
• CSS fill-opacity 속성은 채우기 색상의 불투명도를 정의합니다(허용 범위: 0 ~ 1).
• CSS stroke-opacity 속성은 획 색상의 불투명도를 정의합니다(허용 범위: 0 ~ 1).

실시예 3

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

다음은 SVG 코드입니다.

코드 설명:

• CSS opacity 속성은 전체 요소의 불투명도 값을 정의합니다(법적 범위: 0 ~ 1).

실시예 4

마지막 예에서는 모서리가 둥근 사각형을 만듭니다.

다음은 SVG 코드입니다.

코드 설명:

• rx 및 ry 속성은 사각형의 모서리를 반올림합니다.