SVGSVGElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGSVGElement.height

Beschreibung

Die Eigenschaft height eines SVGSVGElement spiegelt das Attribut height des <svg>-Elements wider. Sie gibt kein einfaches Zahl- oder Zeichenkettenobjekt zurück, sondern ein SVGAnimatedLength-Objekt. Dieses enthält zwei SVGLength-Werte: baseVal (der im Attribut gesetzte Grundwert) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert).

Schreibgeschützt ist nur die Eigenschaft selbst – das Objekt lässt sich nicht ersetzen. Über height.baseVal kann der Wert aber sehr wohl geändert werden, etwa mit baseVal.value = 300 oder baseVal.newValueSpecifiedUnits(). Die Änderung wird sofort ins Attribut zurückgeschrieben.

Typische Einsatzfälle sind das Auslesen der deklarierten Höhe in Benutzereinheiten (baseVal.value), das Umrechnen zwischen Einheiten (convertToSpecifiedUnits()) sowie das dynamische Skalieren einer Grafik per Skript. Fehlt das Attribut, gilt der Standardwert auto, der bei äußeren <svg>-Elementen als 100% behandelt wird.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal und animVal (jeweils SVGLength), die die Höhe des Elements beschreiben.

Beispiele

Höhe auslesen

// <svg id="grafik" width="400" height="250"></svg>
const svg = document.getElementById('grafik');
const { baseVal } = svg.height;
console.log(baseVal.value);             // Wert in Benutzereinheiten (px)
console.log(baseVal.valueAsString);     // Originalschreibweise
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

250 "250" true

Höhe dynamisch ändern

const svg = document.querySelector('svg');
// Die Eigenschaft ist read-only, baseVal aber veränderbar
svg.height.baseVal.value = 500;
console.log(svg.getAttribute('height'));

// Mit expliziter Einheit setzen
svg.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 80);
console.log(svg.getAttribute('height'));

"500" "80%"

Seitenverhältnis erhalten beim Skalieren

const scaleSvg = (svg, newWidth) => {
  const w = svg.width.baseVal.value;
  const h = svg.height.baseVal.value;
  svg.width.baseVal.value = newWidth;
  svg.height.baseVal.value = Math.round(newWidth * (h / w));
};

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '400');
svg.setAttribute('height', '300');
scaleSvg(svg, 200);
console.log(svg.getAttribute('width'), svg.getAttribute('height'));

200 150

// Wichtig · Fallstricke

Kein direkter Zahlenwert: svg.height liefert ein Objekt. Ausdrücke wie svg.height + 10 oder svg.height = 300 funktionieren nicht – immer svg.height.baseVal.value verwenden.
Prozentwerte: Bei height="100%" hängt baseVal.value vom Viewport ab; bei nicht eingehängten Elementen kann der Wert 0 sein oder beim Umrechnen eine Ausnahme ausgelöst werden. Für die tatsächlich gerenderte Größe besser getBoundingClientRect() nutzen.
CSS hat Vorrang: Eine CSS-Eigenschaft height überschreibt das Attribut beim Rendern, ändert aber baseVal nicht.
animVal ist schreibgeschützt; Zuweisungen lösen einen Fehler aus.
Elemente per document.createElementNS() mit SVG-Namensraum anlegen, sonst entsteht kein SVGSVGElement.
Kompatibilität: in allen modernen Browsern unterstützt.

Siehe auch

SVGSVGElement.width SVGSVGElement.x SVGSVGElement.y SVGAnimatedLength SVGLength SVGSVGElement Element.getBoundingClientRect()