SVGRectElement

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.

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

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

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

• <rect>