<rect>
======

**`<rect>`** 요소는 위치, 너비, 그리고 높이로 정의된 사각형을 그리는 기본 SVG 모양입니다. 이 직사각형은 둥근 모서리를 가질 수 있습니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>
```

속성
--

`x (en-US)`

 직사각형의 x 좌표입니다.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본값: `0`; 애니메이션 가능: **예**

`y (en-US)`

 직사각형의 y 좌표입니다.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 애니메이션 가능: **예**

`width (en-US)`

 직사각형의 너비.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`height (en-US)`

 직사각형의 높이.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`rx (en-US)`

 직사각형의 가로 모서리 반지름입니다. `ry`가 지정 된 경우 `ry`가 기본값입니다.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`ry (en-US)`

 직사각형의 세로 모서리 반지름입니다. `rx`가 지정 된 경우 `rx`가 기본값입니다.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`pathLength (en-US)`

 직사각형 둘레의 총 길이(사용자 단위).
 값 유형: **<number>** (en-US) ; 기본 값: 없음; 애니메이션 가능: **예**



**참고:** SVG2부터 시작하여 `x`, `y`, `width`, `height`, `rx` 그리고 `ry`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RectElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: `<circle>`, `<ellipse>`, `<line>` (en-US), **`<polygon>` (en-US)**, `<polyline>` (en-US)