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>

结果

产品规格

浏览器兼容性