1# rect 2 3 4> **说明：** 5> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 6 7用于绘制矩形、圆角矩形。 8 9## 权限列表 10 11无 12 13 14## 子组件 15 16支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。 17 18 19## 属性 20 21支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 22 23| 名称 | 类型 | 默认值 | 必填 | 描述 | 24| -------- | -------- | -------- | -------- | -------- | 25| id | string | - | 否 | 组件的唯一标识。 | 26| width | <length>\|<percentage> | 0 | 否 | 设置矩形的宽度。支持属性动画 | 27| height | <length>\|<percentage> | 0 | 否 | 设置矩形的高度。支持属性动画 | 28| x | <length>\|<percentage> | 0 | 否 | 设置矩形左上角x轴坐标。支持属性动画 | 29| y | <length>\|<percentage> | 0 | 否 | 设置矩形左上角y轴坐标。支持属性动画 | 30| rx | <length>\|<percentage> | 0 | 否 | 设置矩形圆角x方向半径。支持属性动画 | 31| ry | <length>\|<percentage> | 0 | 否 | 设置矩形圆角y方向半径。支持属性动画 | 32 33 34## 示例 35 36```html 37<!-- xxx.hml --> 38<div class="container"> 39 <svg fill="white" width="400" height="400"> 40 <rect width="100" height="100" x="10" y="20" stroke-width="4" stroke="blue" id="rectId"></rect> 41 <rect width="100" height="100" x="150" y="20" stroke-width="4" stroke="blue" rx="10" ry="10"></rect> 42 <rect width="100" height="100" x="10" y="130" stroke-width="10" fill="red" stroke="blue" rx="10" ry="10"></rect> 43 <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> 44 <rect width="100" height="100" x="20" y="270" stroke-width="4" stroke="blue" transform="rotate(-10)"></rect> 45 </svg> 46</div> 47``` 48 49 50 51
