SVGImageElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGImageElement.height

Beschreibung

Die Eigenschaft height des Interfaces SVGImageElement liefert ein SVGAnimatedLength-Objekt, das die Höhe des Anzeigebereichs eines <image>-Elements in einer SVG-Grafik beschreibt. Sie gehört zusammen mit x, y und width zu den Geometrie-Eigenschaften des Elements.

Die Eigenschaft selbst ist schreibgeschützt; die eigentliche Länge liest und ändert man über height.baseVal (ein SVGLength-Objekt). Mit baseVal.value erhält man den Wert in Benutzereinheiten (User Units), mit baseVal.valueAsString den Originaltext samt Einheit, etwa "50%". height.animVal gibt den aktuell animierten Wert zurück, z. B. während einer SMIL-Animation mit <animate>.

Typische Einsatzfälle sind das dynamische Skalieren eingebetteter Rastergrafiken, das Berechnen von Seitenverhältnissen oder das Auslesen von Layout-Werten in interaktiven Diagrammen. In SVG 2 ist height auch eine Geometrie-Eigenschaft, die per CSS gesetzt werden kann; der Standardwert auto entspricht dann der natürlichen Bildhöhe.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (statischer Wert als SVGLength) und animVal (aktueller, ggf. animierter Wert als SVGLength, schreibgeschützt).

Beispiele

Höhe eines SVG-Bildes auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const img = document.createElementNS(svgNS, 'image');
img.setAttribute('href', 'logo.png');
img.setAttribute('width', '120');
img.setAttribute('height', '80');
svg.append(img);
document.body.append(svg);

console.log(img.height.baseVal.value);
console.log(img.height.baseVal.valueAsString);

80 "80"

Höhe unter Beibehaltung des Seitenverhältnisses ändern

const img = document.querySelector('svg image');

const scaleTo = (newHeight) => {
  const w = img.width.baseVal.value;
  const h = img.height.baseVal.value;
  const ratio = w / h;
  img.height.baseVal.value = newHeight;
  img.width.baseVal.value = newHeight * ratio;
};

scaleTo(160);
console.log(img.getAttribute('height'), img.getAttribute('width'));

160 240 (bei Ausgangsgröße 120×80)

Prozentwert mit Einheit setzen

const img = document.querySelector('svg image');
const len = img.height.baseVal;

// Wert als Prozent der Viewport-Höhe setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(len.valueAsString);
console.log(img.getAttribute('height'));

"50%" "50%"

// Wichtig · Fallstricke

Nicht direkt zuweisen: img.height = 100 bewirkt nichts (bzw. wirft im Strict Mode einen TypeError), weil die Eigenschaft schreibgeschützt ist. Ändern Sie stattdessen img.height.baseVal.value oder nutzen Sie setAttribute('height', …).
Relative Einheiten: Bei Prozentangaben oder em hängt baseVal.value vom Viewport bzw. der Schriftgröße ab. Ist das Element noch nicht im Dokument, kann das Umrechnen fehlschlagen oder 0 ergeben.
CSS hat Vorrang: Wird height per CSS gesetzt (SVG 2), spiegelt baseVal weiterhin nur das Attribut wider. Die tatsächlich dargestellte Größe liefert getBBox() oder getBoundingClientRect().
Fehlendes Attribut: Fehlt height, liefert baseVal.value meist 0, auch wenn der Browser das Bild in natürlicher Größe darstellt.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Den Wert auto und die Größenangabe per CSS unterstützen ältere Browser nicht zuverlässig.

Siehe auch

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