rect
<rect>
<rect>是一个基本SVG创建的矩形，可以通过拐角的位置，它们的宽度和它们的高度限定。矩形可能会有角落圆角。
用法上下文
| 分类 | 基本形状元素，图形元素，形状元素 |
|---|---|
| 允许的内容 | 任意数量的以下元素，以任何顺序排列：动画元素描述性元素 |
属性
全局属性
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
class
style
externalResourcesRequired
transform
具体属性
x确定矩形的x坐标。y确定矩形的y坐标。width确定矩形的宽度。height确定矩形的高度。rx确定矩形的水平圆角半径。ry确定矩形的垂直圆角半径。
DOM接口
这个元素实现了SVGRectElement接口。
例子
简单的rect用法
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100"/>
</svg>
结果
圆角矩形
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" rx="15" ry="15"/>
</svg>
结果
产品规格
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2The definition of '<rect>' in that specification. | Candidate Recommendation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<rect>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0 | (Yes) | 1.0 (1.8) | No support | (Yes) | 3.0.4 |
