SVGRectElement

Baseline Widely available

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

Das SVGRectElement-Interface bietet Zugriff auf die Eigenschaften von <rect>-Elementen sowie Methoden, um sie zu manipulieren.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Eltern-Interface, 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

Dieses Interface implementiert keine spezifischen Methoden, erbt jedoch Methoden von seinem Eltern-Interface SVGGeometryElement.

Beispiele

Ändern der Farbe eines SVG-Rechtecks

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

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

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement

Browser-Kompatibilität

Siehe auch

<rect>