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.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGeometryElement.

SVGRectElement.x Schreibgeschützt: Gibt ein SVGAnimatedLength zurück, das dem x-Attribut des angegebenen <rect>-Elements entspricht.
SVGRectElement.y Schreibgeschützt: Gibt ein SVGAnimatedLength zurück, das dem y-Attribut des angegebenen <rect>-Elements entspricht.
SVGRectElement.width Schreibgeschützt: Gibt ein SVGAnimatedLength zurück, das dem width-Attribut des angegebenen <rect>-Elements entspricht.
SVGRectElement.height Schreibgeschützt: Gibt ein SVGAnimatedLength zurück, das dem height-Attribut des angegebenen <rect>-Elements entspricht.
SVGRectElement.rx Schreibgeschützt: Gibt ein SVGAnimatedLength zurück, das dem rx-Attribut des angegebenen <rect>-Elements entspricht.
SVGRectElement.ry Schreibgeschützt: 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

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

Siehe auch

<rect>