HTML 그래픽 – 직사각형

직사각형

SVG 모양

SVG에는 개발자가 사용할 수 있는 몇 가지 미리 정의된 도형 요소가 있다.

• 구형 <rect>
• 원 <circle>
• 타원 <ellipse>
• 선 <line>
• 폴리라인 <polyline>
• 다각형 <polygon>
• 길 <path>

SVG 사각형 – <rect>

<rect>요소는 직사각형이나 직사각형 모양의 변형을 만드는 데 사용된다.

<rect> 요소에는 사각형의 위치와 모양을 지정하는 6가지 기본 속성이 있다.

SVG 사각형

<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">

  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />

</svg>

• 이 <rect> 요소는 사각형을 그리는 데 사용된다.
• 사각형의 너비와 높이는 <rect> 요소의 width 및 height 속성으로 정의된다.
• x 및 y 속성은 사각형의 왼쪽 위 모서리의 x 및 y 좌표를 정의한다.
• rx 및 ry 속성은 사각형 모서리의 반지름을 정의하고, fill 속성은 사각형의 채우기 색상을 정의한다.

테두리가 있는 사각형

<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">

  <rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />

</svg>

• style 속성은 사각형에 대한 CSS 속성을 정의하는 데 사용된다.
• CSS fill 속성은 사각형의 채우기 색상을 정의한다.
• CSS stroke-width 속성은 사각형의 테두리 두께를 정의한다.
• CSS stroke 속성은 사각형의 테두리 색상을 정의한다.

불투명도가 있는 직사각형

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">

  <rect width="150" height="150" x="10" y="10"

  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

</svg>

• CSS fill-opacity 속성은 채우기 색상의 불투명도를 정의한다 (허용 범위: 0에서 1).
• CSS stroke-opacity 속성은 테두리 색상의 불투명도를 정의한다 (허용 범위: 0에서 1).

불투명도가 있는 다른 직사각형

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">

  <rect width="150" height="150" x="10" y="10"

  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />

</svg>

• CSS opacity 속성은 전체 요소의 불투명도 값을 정의한다 (허용 범위: 0에서 1).

모서리가 둥근 직사각형

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">

  <rect width="150" height="150" x="10" y="10" rx="20" ry="20"

  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

1. rx 및 ry 속성은 사각형의 모서리를 둥글게 만든다.