SVGRectElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGRectElement extends SVGGeometryElement

Beschreibung

SVGRectElement ist die DOM-Schnittstelle für das SVG-Element <rect>. Sie erbt von SVGGeometryElement und damit auch von SVGGraphicsElement, SVGElement und Element. Deshalb stehen Methoden wie getBBox(), getTotalLength(), isPointInFill() und getPointAtLength() direkt zur Verfügung.

Die Schnittstelle fügt sechs schreibgeschützte Eigenschaften vom Typ SVGAnimatedLength hinzu: x, y, width, height, rx und ry. Über .baseVal liest oder setzt man den Grundwert (ein SVGLength-Objekt), über .animVal den aktuellen, gegebenenfalls durch SMIL-Animation veränderten Wert.

Typische Einsatzfälle sind Diagramme (Balken), Auswahlrahmen, Hintergrundflächen und interaktive Grafiken. Man erzeugt die Elemente mit document.createElementNS('http://www.w3.org/2000/svg', 'rect'). document.createElement('rect') funktioniert nicht, weil dabei ein unbekanntes HTML-Element entsteht.

Parameter

Name	Typ	Default	Beschreibung
$x	SVGAnimatedLength	0	Horizontale Position der linken oberen Ecke (Attribut `x`). Nur lesbar, der Wert wird über `x.baseVal.value` geändert.
$y	SVGAnimatedLength	0	Vertikale Position der linken oberen Ecke (Attribut `y`).
$width	SVGAnimatedLength	auto (0)	Breite des Rechtecks. Ist sie 0, wird das Rechteck nicht gezeichnet.
$height	SVGAnimatedLength	auto (0)	Höhe des Rechtecks. Ist sie 0, wird das Rechteck nicht gezeichnet.
$rx	SVGAnimatedLength	auto	Horizontaler Eckenradius. Ist nur `rx` gesetzt, übernimmt `ry` denselben Wert.
$ry	SVGAnimatedLength	auto	Vertikaler Eckenradius. Ist nur `ry` gesetzt, übernimmt `rx` denselben Wert.

Rückgabewert

Typ

SVGRectElement

Beschreibung

Instanzen erhält man über createElementNS() oder durch Abfrage vorhandener <rect>-Elemente, z. B. mit querySelector('rect').

Beispiele

Rechteck per JavaScript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');

const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '120');
rect.setAttribute('height', '60');
rect.setAttribute('rx', '8');
rect.setAttribute('fill', 'steelblue');

svg.append(rect);
document.body.append(svg);

console.log(rect instanceof SVGRectElement);
console.log(rect.width.baseVal.value);

true 120

Größe über SVGAnimatedLength ändern

const rect = document.querySelector('svg rect');

// Grundwert direkt als Zahl (Benutzereinheiten) setzen
rect.width.baseVal.value = 200;
rect.rx.baseVal.value = 12;

// Wert mit Einheit setzen
rect.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);

console.log(rect.getAttribute('width'));
console.log(rect.getAttribute('height'));

200 50%

Einfaches Balkendiagramm

const SVG_NS = 'http://www.w3.org/2000/svg';
const data = [40, 75, 20, 90];
const svg = document.querySelector('#chart'); // <svg id="chart" width="220" height="100">

data.forEach((value, i) => {
  const bar = document.createElementNS(SVG_NS, 'rect');
  bar.x.baseVal.value = i * 55;
  bar.y.baseVal.value = 100 - value;
  bar.width.baseVal.value = 45;
  bar.height.baseVal.value = value;
  bar.setAttribute('fill', value > 50 ? 'seagreen' : 'tomato');
  svg.append(bar);
});

console.log(svg.querySelectorAll('rect').length);

4

Geometrie-Methoden nutzen (Umfang, Treffertest)

const rect = document.querySelector('rect'); // x=10 y=10 width=120 height=60

console.log(rect.getTotalLength());            // Umfang
console.log(rect.getBBox().width);

const pt = new DOMPoint(50, 40);
console.log(rect.isPointInFill(pt));

360 120 true

// Wichtig · Fallstricke

Namensraum beachten: Die Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', 'rect') erzeugt werden, sonst entsteht ein wirkungsloses HTMLUnknownElement.
Die Eigenschaften x, width usw. sind nur lesbar. rect.width = 100 schlägt stillschweigend fehl (im Strict Mode wirft es einen TypeError). Richtig ist rect.width.baseVal.value = 100 oder setAttribute('width', 100).
baseVal.value liefert immer Benutzereinheiten. Bei Prozentangaben hängt das Ergebnis vom Viewport ab und kann vor dem Rendern ungenau sein.
Negative Werte für width/height sind ungültig und verhindern das Zeichnen. rx/ry werden automatisch auf die halbe Breite bzw. Höhe begrenzt.
Laut SVG 2 können x, y, width, height, rx und ry auch per CSS gesetzt werden. CSS hat dann Vorrang vor dem Attribut, baseVal gibt aber weiterhin den Attributwert wieder.
Kompatibilität: Die Schnittstelle wird von allen modernen Browsern unterstützt. Die Geometrie-Methoden aus SVGGeometryElement gibt es für <rect> in älteren Browsern (z. B. dem alten Edge und IE) nicht.

Siehe auch

SVGSetElement SVGTextElement SVGDefsElement SVGDescElement SVGAElement