SVG <rect>

SVG는 개발자가 사용하고 조작할 수 있는 몇 가지 предопределенные 형상 요소를 가지고 있습니다。

SVG 형상

SVG는 개발자가 사용하고 조작할 수 있는 몇 가지 предопределенные 형상 요소를 가지고 있습니다：

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

다음 장에서는 이러한 요소를 설명하겠습니다. 먼저 사각형 요소부터 시작합니다.

<rect> 태그

<rect> 태그는 사각형을 만들고 사각형의 변형을 만드는 데 사용됩니다

이 작업의 원리를 이해하려면 이 코드를 메모장에 복사한 후 "rect1.svg" 파일로 저장하세요. 이 파일을 웹 디렉토리에 넣으세요：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

코드 설명:

  • rect 요소의 width와 height 속성은 사각형의 높이와 너비를 정의할 수 있습니다
  • style 속성은 CSS 속성을 정의하는 데 사용됩니다
  • CSS의 fill 속성은 사각형의 채우기 색을 정의합니다（rgb 값, 색 이름 또는 16진 값）
  • CSS의 stroke-width 속성은 사각형의 경계선의 너비를 정의합니다
  • CSS의 stroke 속성은 사각형의 경계선의 색을 정의합니다

이 예제를 확인하세요

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

예제 설명：

  • x 속성은 사각형의 왼쪽 위치를 정의합니다（예를 들어，x="0"은 사각형이 브라우저 창 왼쪽에 0px 거리이기 때문입니다）
  • y 속성은 사각형의 상단 위치를 정의합니다（예를 들어，y="0"은 사각형이 브라우저 창 상단에 0px 거리이기 때문입니다）
  • CSS의 fill-opacity 속성은 채우기의 투명도를 정의합니다（유효한 범위는 0 - 1입니다）
  • CSS의 stroke-opacity 속성은 텍스트的颜色 투명도를 정의합니다（유효한 범위는 0 - 1입니다）

예제 보기

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

코드 설명:

CSS의 opacity 속성은 전체 요소의 투명도 값을 정의합니다 (합법한 범위는 0 - 1입니다)

예제 보기

마지막 예제, 둥근 모서리를 가진 사각형을 생성하려면:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

코드 설명:

rx 및 ry 속성은 사각형의 둥근 모서리를 생성할 수 있습니다.

예제 보기