[SVG] <rect>

<rect>

<rect> 요소는 직사각형을 그리는 기본 SVG 모양입니다. 직사각형의 위치, 높이, 너비, 모서리 굴곡 등을 표현 할 수 있습니다.

<rect>

<rect> 요소는 직사각형을 그립니다.

정의(Definition)

<rect> 요소는 직사각형을 그립니다.

속성(Property)

속성	설명
x	사각형의 X좌표 값을 설정합니다.
y	사각형의 Y좌표 값을 설정합니다.
width	사각형의 가로 값을 설정합니다.
height	사각형의 세로 값을 설정합니다
rx	사각형의 보더 굴곡의 X값을 설정합니다.
ry	사각형의 보더 굴곡의 Y값을 설정합니다.

1. 사각형

SVG를 이용한 사각형입니다.

Sample1

CSS

.svg {width: 160px; height: 160px; background: #ffebee;}
.rect1 {
    fill: #f48fb1; 
    width: 100px; height: 100px; 
    x: 30; y: 30;
}
.rect2 {
    fill: #f48fb1; 
    width: 100px; height: 100px; 
    x: 30; y: 30;
    stroke: #880e4f;
    stroke-width: 5;
}   
.rect3 {
    fill: #f48fb1; 
    width: 100px; height: 100px; 
    x: 30; y: 30; rx: 20; ry: 20;
}  
.rect4 {
    fill: #f48fb1; 
    width: 100px; height: 100px; 
    x: 30; y: 30; rx: 20; ry: 20;
    stroke: #880e4f;
    stroke-width: 5;
}

TOTAL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
    .svg {width: 160px; height: 160px; background: #ffebee;}
    .rect1 {
        fill: #f48fb1; 
        width: 100px; height: 100px; 
        x: 30; y: 30;
    }
    .rect2 {
        fill: #f48fb1; 
        width: 100px; height: 100px; 
        x: 30; y: 30;
        stroke: #880e4f;
        stroke-width: 5;
    }   
    .rect3 {
        fill: #f48fb1; 
        width: 100px; height: 100px; 
        x: 30; y: 30; rx: 20; ry: 20;
    }  
    .rect4 {
        fill: #f48fb1; 
        width: 100px; height: 100px; 
        x: 30; y: 30; rx: 20; ry: 20;
        stroke: #880e4f;
        stroke-width: 5;
    }  
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <rect class="rect1"></rect>
        </svg>
        <svg class="svg">
            <rect class="rect2"></rect>
        </svg>
        <svg class="svg">
            <rect class="rect3"></rect>
        </svg>
        <svg class="svg">
            <rect class="rect4"></rect>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<rect>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능