SVGRectElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die SVGRectElement-Schnittstelle bietet Zugriff auf die Eigenschaften von <rect>-Elementen, sowie Methoden zu deren Manipulation.

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGRectElement

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGeometryElement.

SVGRectElement.x Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem x-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.y Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem y-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.width Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem width-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.height Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem height-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.rx Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem rx-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.ry Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem ry-Attribut des angegebenen <rect>-Elements entspricht.

Instanz-Methoden

Diese Schnittstelle implementiert keine spezifischen Methoden, aber erbt Methoden von ihrem Elternteil, SVGGeometryElement.

Beispiele

Ändern der Farbe eines SVG-Rechtecks

Dieses Beispiel setzt die Füllfarbe eines SVGRectElement auf einen zufälligen Wert, sobald der Nutzer darauf klickt.

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

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

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGRectElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch