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