SVG <rect> 예제

예제 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 채우기 불투명도 속성은 채우기 색상의 불투명도를 정의합니다 (유효한 범위 : 0 ~ 1).
CSS stroke-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 불투명도 속성은 전체 요소의 불투명도 값을 정의합니다 (유효 범위 : 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 속성은 사각형의 모서리를 반올림합니다.