<rect>

使用语境

属性

x

矩形的 x 坐标。值类型：<length> | <percentage>；默认值：0；可动画：是

y

矩形的 y 坐标。值类型：<length> | <percentage>；默认值：0；可动画：是

width

矩形的宽度。值类型：auto | <length> | <percentage>；默认值：auto；可动画：是

height

矩形的高度。值类型：auto | <length> | <percentage>；默认值：auto；可动画：是

rx

矩形水平角的半径。如果指定了 ry，则默认为 ry。值类型：auto | <length> | <percentage>；默认值：auto；可动画：是

ry

矩形垂直角的半径。如果指定了 rx，则默认为 rx。值类型：auto | <length> | <percentage>；默认值：auto；可动画：是

路径长度

矩形周长的总长度，以用户单位表示。值类型：<number>；默认值：无；可动画：是

DOM 接口

此元素实现了 SVGRectElement 接口。

示例

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Regular rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

规范

浏览器兼容性

另见

• SVG 演示属性，包括 fill 和 stroke
• 其他基本的 SVG 形状：<circle>、<ellipse>、<line>、<polygon>、<polyline>