SVGRectElement

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

实例属性

此接口还从其父级 SVGGeometryElement 继承属性。

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

实例方法

此接口没有实现任何特定方法，但从其父级 SVGGeometryElement 继承方法。

示例

更改 SVG 矩形的颜色

此示例在用户每次点击 SVGRectElement 时，将其填充颜色设置为随机值。

HTML

html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect
    width="300"
    height="100"
    id="myrect"
    style="fill:rgb(0 0 255);stroke-width:1;stroke:rgb(0 0 0)" />
  <text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>

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})`;
});

结果

规范

规范
可缩放矢量图形 (SVG) 2 # 接口 SVGRectElement

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

<rect>