SVGRectElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGRectElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGRectElement gibt das Attribut height eines <rect>-Elements als SVGAnimatedLength zurück. Die Eigenschaft ist schreibgeschützt: Das Objekt selbst lässt sich nicht ersetzen. Seine Unterobjekte baseVal und animVal sind aber vom Typ SVGLength und enthalten den eigentlichen Längenwert.

Über rect.height.baseVal liest und setzt man den im Markup bzw. per Skript festgelegten Grundwert, zum Beispiel mit baseVal.value (in Benutzereinheiten) oder mit baseVal.newValueSpecifiedUnits() für Einheiten wie Prozent oder em. rect.height.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation (<animate>). Dieser Wert ist nur lesbar.

Gebraucht wird die Eigenschaft vor allem für dynamische Grafiken, etwa Balkendiagramme, Fortschrittsanzeigen oder Größenänderungen per Maus. Gegenüber getAttribute('height') hat sie Vorteile: Man bekommt eine Zahl statt einer Zeichenkette, und relative Einheiten werden in Benutzereinheiten umgerechnet.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert, veränderbar) und animVal (aktueller, ggf. animierter Wert, nur lesbar). Beide sind vom Typ SVGLength.

Beispiele

Höhe eines Rechtecks auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '100');
rect.setAttribute('height', '40');
svg.append(rect);
document.body.append(svg);

console.log(rect.height.baseVal.value);
console.log(rect.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

40 true

Balkendiagramm dynamisch aktualisieren

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

const werte = [30, 80, 55];
const balken = werte.map((wert, i) => {
  const rect = document.createElementNS(svgNS, 'rect');
  rect.x.baseVal.value = i * 40;
  rect.width.baseVal.value = 30;
  svg.append(rect);
  return rect;
});

const aktualisieren = (neueWerte) => {
  neueWerte.forEach((wert, i) => {
    balken[i].height.baseVal.value = wert;
    balken[i].y.baseVal.value = 100 - wert; // Balken wachsen von unten
  });
};

aktualisieren([60, 20, 90]);
console.log(balken.map((r) => r.getAttribute('height')));

["60", "20", "90"]

Höhe in Prozent setzen und umgerechnet lesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '200');
const rect = document.createElementNS(svgNS, 'rect');
svg.append(rect);
document.body.append(svg);

rect.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

console.log(rect.getAttribute('height'));
console.log(rect.height.baseVal.value); // in Benutzereinheiten

50% 100

// Wichtig · Fallstricke

Nicht direkt zuweisen: rect.height = 50 hat keine Wirkung, im Strict Mode wirft die Zuweisung einen TypeError. Richtig ist rect.height.baseVal.value = 50.
animVal ist nur lesbar: Schreibversuche lösen eine DOMException (NoModificationAllowedError) aus.
CSS kann den Wert überschreiben: In SVG 2 ist height auch eine CSS-Eigenschaft. Eine Regel wie rect { height: 80px } ändert die dargestellte Höhe, aber nicht baseVal. Die tatsächlich gerenderte Größe liefert getBBox().
Negative Werte sind ungültig: Das Rechteck wird dann nicht gezeichnet. Die Höhe 0 blendet es ebenfalls aus.
Relative Einheiten (%, em) lassen sich erst sicher in value umrechnen, wenn das Element im Dokument hängt und einen Viewport hat.
Namensraum beachten: Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', 'rect') erzeugt werden. Mit createElement entsteht kein SVGRectElement, und height ist dann undefined.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

SVGRectElement SVGRectElement.width SVGRectElement.x SVGRectElement.y SVGAnimatedLength SVGLength SVGGraphicsElement.getBBox()