O elemento <rect>
é uma forma SVG básica que desenha retângulos, definidos por sua posição, largura e altura. Os retângulos podem ter seus cantos arredondados.
html,body,svg { height:100% }
<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>
Attributes
x
- The x coordinate of the rect.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes y
- The y coordinate of the rect.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes width
- The width of the rect.
Value type:auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes height
- The height of the rect.
Value type:auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes rx
- The horizontal corner radius of the rect. Defaults to
ry
if it is specified.
Value type:auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes ry
- The vertical corner radius of the rect. Defaults to
rx
if it is specified.
Value type:auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes pathLength
- The total length of the rectangle's perimeter, in user units.
Value type: <number> ; Default value: none; Animatable: yes
Note: Starting with SVG2, x
, y
, width
, height
, rx
and ry
are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
Global attributes
- Core Attributes
- Most notably:
id
,tabindex
- Styling Attributes
class
,style
- Conditional Processing Attributes
- Most notably:
requiredExtensions
,systemLanguage
- Event Attributes
- Global event attributes, Graphical event attributes
- Presentation Attributes
- Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- Aria Attributes
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
Usage notes
Categorias | Elemento básico de forma, Elemento gráfico, Elemento de forma |
---|---|
Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem: Elementos de animação Elementos descritivos |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<rect>' in that specification. |
Candidata a Recomendação | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<rect>' in that specification. |
Recomendação | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- Other basic SVG shapes:
<circle>
,<ellipse>
,<line>
,<polygon>
,<polyline>