rect

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

* Some parts of this feature may have varying levels of support.

O elemento<rect> é umaforma 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%;}

html

<svg viewBox="0 0 220 100" xmlns="https://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 tory if it is specified.Value type:auto|<length>|<percentage> ;Default value:auto;Animatable:yes
ry: The vertical corner radius of the rect. Defaults torx 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

Nota:Starting with SVG2,x,y,width,height,rx andry areGeometry 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