1# rect 2 3 4> **NOTE** 5> 6> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7 8The **\<rect>** component is used to draw rectangles and rounded rectangles. 9 10## Required Permissions 11 12None 13 14 15## Child Components 16 17The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md). 18 19 20## Attributes 21 22The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. 23 24| Name| Type| Default Value| Mandatory| Description| 25| -------- | -------- | -------- | -------- | -------- | 26| id | string | - | No| Unique ID of the component.| 27| width | <length>\|<percentage> | 0 | No| Width of the rectangle. Attribute animations are supported.| 28| height | <length>\|<percentage> | 0 | No| Height of the rectangle. Attribute animations are supported.| 29| x | <length>\|<percentage> | 0 | No| X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.| 30| y | <length>\|<percentage> | 0 | No| Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.| 31| rx | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.| 32| ry | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.| 33 34 35## Example 36 37```html 38<!-- xxx.hml --> 39<div class="container"> 40 <svg fill="white" width="400" height="400"> 41 <rect width="100" height="100" x="10" y="20" stroke-width="4" stroke="blue" id="rectId"></rect> 42 <rect width="100" height="100" x="150" y="20" stroke-width="4" stroke="blue" rx="10" ry="10"></rect> 43 <rect width="100" height="100" x="10" y="130" stroke-width="10" fill="red" stroke="blue" rx="10" ry="10"></rect> 44 <rect width="100" height="100" x="150" y="130" stroke-width="10" stroke="red" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect> 45 <rect width="100" height="100" x="20" y="270" stroke-width="4" stroke="blue" transform="rotate(-10)"></rect> 46 </svg> 47</div> 48``` 49 50 51 52
