SVGForeignObjectElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGForeignObjectElement.height

Beschreibung

Die Eigenschaft height des Interfaces SVGForeignObjectElement gibt ein SVGAnimatedLength-Objekt zurück. Es steht für das Attribut height (bzw. die CSS-Eigenschaft height) des <foreignObject>-Elements. In diesem Element lassen sich fremde Inhalte wie HTML in eine SVG-Grafik einbetten, z. B. umbrechenden Fließtext, Formulare oder gestylte <div>-Blöcke.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann ihr kein neues Objekt zuweisen. Den Wert ändert man über height.baseVal, ein SVGLength-Objekt mit den Feldern value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString. height.animVal enthält den aktuellen, möglicherweise durch SMIL-Animation veränderten Wert und lässt sich nur lesen.

Die Höhe braucht man immer dann, wenn der eingebettete Inhalt dynamisch an den Platz angepasst werden soll, etwa um die Höhe eines foreignObject an die tatsächliche Höhe des enthaltenen HTML-Texts anzugleichen. Zusammen mit x, y und width legt sie den sichtbaren Bereich fest. Inhalt außerhalb dieses Bereichs wird in der Regel abgeschnitten.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbare SVGLength) und animVal (schreibgeschützte, animierte SVGLength) für die Höhe des Elements.

Beispiele

Höhe auslesen

// <svg width="300" height="200"><foreignObject id="fo" x="10" y="10" width="200" height="80">...</foreignObject></svg>
const fo = document.getElementById('fo');
console.log(fo.height.baseVal.value);
console.log(fo.height.baseVal.valueAsString);
console.log(fo.height instanceof SVGAnimatedLength);

80 "80" true

Höhe per baseVal ändern

const fo = document.querySelector('foreignObject');
// Neuer Wert in Benutzereinheiten
fo.height.baseVal.value = 150;
console.log(fo.getAttribute('height'));

// Wert in Prozent setzen
fo.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(fo.getAttribute('height'));

"150" "50%"

Höhe an eingebetteten HTML-Inhalt anpassen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const fo = document.createElementNS(svgNS, 'foreignObject');
fo.setAttribute('x', '0');
fo.setAttribute('y', '0');
fo.setAttribute('width', '200');
fo.setAttribute('height', '1');

const div = document.createElement('div');
div.textContent = 'Ein längerer Text, der innerhalb der SVG-Grafik umbrechen soll.';
fo.append(div);
svg.append(fo);

// Nach dem Layout die tatsächliche Höhe übernehmen
requestAnimationFrame(() => {
  fo.height.baseVal.value = div.scrollHeight;
  console.log('Neue Höhe:', fo.height.baseVal.value);
});

Neue Höhe: 38 (abhängig von Schrift und Browser)

// Wichtig · Fallstricke

Kein direktes Zuweisen: fo.height = 100 bewirkt nichts (im Strict Mode gibt es einen TypeError). Stattdessen fo.height.baseVal.value setzen oder setAttribute('height', …) verwenden.
animVal ist schreibgeschützt. Schreibversuche lösen eine DOMException (NoModificationAllowedError) aus.
Seit SVG 2 ist height auch eine CSS-Eigenschaft. Eine per CSS gesetzte Höhe hat Vorrang vor dem Attribut, baseVal spiegelt aber nur das Attribut wider. Die gerenderte Größe ermittelt man mit getBBox() oder getBoundingClientRect().
Fehlt das Attribut oder ist es 0, wird der Inhalt nicht dargestellt.
Kompatibilität: wird von allen modernen Browsern unterstützt. Ältere Safari-Versionen hatten Darstellungsfehler mit foreignObject bei Transformationen und Zoom.
Elemente in SVG immer mit createElementNS und dem SVG-Namensraum erzeugen, sonst ist height undefined.

Siehe auch

SVGForeignObjectElement SVGForeignObjectElement.width SVGForeignObjectElement.x SVGForeignObjectElement.y SVGAnimatedLength SVGLength PictureInPictureWindow.height