SVGUseElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGUseElement.height

Beschreibung

Die Eigenschaft height des SVGUseElement-Interfaces entspricht dem Attribut height eines <use>-Elements. Sie gibt ein SVGAnimatedLength-Objekt zurück. Dieses enthält zwei Werte: den Basiswert (baseVal, also den im Attribut gesetzten Wert) und den aktuell animierten Wert (animVal).

Wichtig für die Wirkung: height (wie auch width) hat beim <use>-Element nur dann einen Effekt, wenn das referenzierte Element ein <svg> oder <symbol> ist. Dann überschreibt der Wert die Höhe des erzeugten Viewports. Bei einfachen Formen wie <rect> oder <circle> wird der Wert ignoriert.

Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen. Den Wert ändert man stattdessen über height.baseVal.value, über baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute('height', …). Nützlich ist das z. B. bei Icon-Sprites, deren Symbole je nach Kontext unterschiedlich groß dargestellt werden sollen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (SVGLength, im Attribut gesetzter Wert) und animVal (SVGLength, aktueller animierter Wert, schreibgeschützt). Ohne gesetztes Attribut ist der Wert 0 und gilt als auto, was dasselbe wie 100% bedeutet.

Beispiele

Höhe eines <use>-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <symbol id="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></symbol>
  <use id="u" href="#icon" x="0" y="0" width="48" height="48"/>`;
document.body.append(svg);

const use = svg.querySelector('#u');
console.log(use.height.baseVal.value);
console.log(use.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

48 true

Icon-Größe dynamisch ändern

const use = document.querySelector('use[href="#icon"]');

const setIconSize = (px) => {
  use.width.baseVal.value = px;
  use.height.baseVal.value = px;
};

setIconSize(64);
console.log(use.getAttribute('height'));

64

Höhe mit Einheit setzen

const use = document.querySelector('use');

// Höhe auf 50 % des Eltern-Viewports setzen
use.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);
console.log(use.getAttribute('height'));
console.log(use.height.baseVal.valueAsString);

50% 50%

// Wichtig · Fallstricke

Kein Effekt bei einfachen Formen: height wirkt nur, wenn das referenzierte Element ein <symbol> oder <svg> ist. Bei <rect>, <path> usw. passiert nichts. Zum Skalieren nutzt man dort transform.
Schreibgeschützt: use.height = … schlägt im strikten Modus mit einem Fehler fehl und wird sonst stillschweigend ignoriert. Ändern Sie stattdessen baseVal.
animVal: animVal ist immer schreibgeschützt. Viele Browser liefern dort unabhängig von SMIL-Animationen denselben Wert wie baseVal.
Relative Einheiten: Bei % oder em kann baseVal.value (Pixelwert) erst berechnet werden, wenn das Element im Dokument hängt und gerendert wird.
CSS hat Vorrang: In SVG 2 ist height eine Geometrie-Eigenschaft. Eine CSS-Regel height überschreibt deshalb das Attribut, baseVal zeigt aber weiterhin den Attributwert.
Browser-Unterstützung: Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGUseElement.width SVGUseElement.x SVGUseElement.y SVGUseElement.href SVGAnimatedLength SVGLength SVGUseElement