The <rect>
element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
The <rect>
element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
<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
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.
class
, style
Most notably: requiredExtensions
, systemLanguage
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-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
Categories | Basic shape element, Graphics element, Shape element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RectElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
rect |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | Yes | 2 | Yes |
height |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
rx |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
ry |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
width |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
x |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
y |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
<circle>
, <ellipse>
, <line>
, <polygon>
, <polyline>
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect