SVGRectElement

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

<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

#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

Browser-Kompatibilität

Siehe auch

• <rect>