SVGRectElement

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGeometryElement.

SVGRectElement.x Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem x-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.y Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem y-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.width Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem width-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.height Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem height-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.rx Nur lesbar

Gibt ein SVGAnimatedLength zurück, das dem rx-Attribut des angegebenen <rect>-Elements entspricht.

SVGRectElement.ry Nur lesbar

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>