SVGRectElement

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>