SVGRectElement

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

SVGRectElement 接口提供了对 <rect> 元素的属性的访问，以及用于操作它们的方.法。

实例属性

此接口还继承了其父接口 SVGGeometryElement 的属性。

SVGRectElement.x 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 x 属性。
SVGRectElement.y 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 y 属性。
SVGRectElement.width 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 width 属性。
SVGRectElement.height 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 height 属性。
SVGRectElement.rx 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 rx 属性。
SVGRectElement.ry 只读: 返回一个 SVGAnimatedLength 对象，对应给定 <rect> 元素的 ry 属性。

实例方法

此接口不实现任何特定方法，但继承了其父接口 SVGGeometryElement 的方法。

示例

更改 SVG 矩形的颜色

此示例在用户单击 SVG 矩形时，将其填充颜色设置为随机值。

HTML

html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" id="myrect" />
  <text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>

CSS

css

#myrect {
  fill: blue;
  stroke-width: 1;
  stroke: black;
}

JavaScript

const myRect = document.querySelector("#myrect");

myRect.addEventListener("click", () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  myRect.style.fill = `rgb(${r} ${g} ${b})`;
});

结果

规范

规范
Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement

浏览器兼容性

另见

<rect>

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年6月19日，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误