SVGMaskElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGMaskElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGMaskElement gibt die Höhe des Maskenbereichs als SVGAnimatedLength zurück. Zusammen mit x, y und width legt sie das Rechteck fest, innerhalb dessen die Maske wirkt. Außerhalb dieses Bereichs wird das maskierte Element vollständig ausgeblendet.

Die Eigenschaft selbst ist schreibgeschützt. Das Objekt, das sie liefert, hat aber zwei Unterobjekte: baseVal (den Grundwert aus dem Attribut, veränderbar) und animVal (den aktuellen, eventuell durch SMIL animierten Wert, nur lesbar). Beide sind SVGLength-Objekte mit value, valueInSpecifiedUnits, unitType und valueAsString.

Wie der Wert zu verstehen ist, hängt vom Attribut maskUnits ab. Beim Standardwert objectBoundingBox ist die Höhe ein Anteil des umgebenden Rechtecks (Bounding Box) des maskierten Elements. Fehlt das Attribut, gilt die Vorgabe 120%. Bei userSpaceOnUse ist sie eine absolute Länge im Benutzerkoordinatensystem.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (je ein SVGLength) für das height-Attribut der Maske.

Beispiele

Höhe einer Maske auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <defs>
    <mask id="fade" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="150">
      <rect width="200" height="150" fill="white" />
    </mask>
  </defs>`;
document.body.append(svg);

const mask = svg.querySelector('#fade');
console.log(mask.height.baseVal.value);
console.log(mask.height.baseVal.valueAsString);

150 "150"

Höhe per Skript ändern

const mask = document.querySelector('#fade');

// Grundwert direkt setzen (Benutzereinheiten)
mask.height.baseVal.value = 300;

// Oder mit Einheit: Prozentangabe
mask.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  80
);

console.log(mask.getAttribute('height'));

"80%"

Standardwert bei objectBoundingBox

const svgNS = 'http://www.w3.org/2000/svg';
const mask = document.createElementNS(svgNS, 'mask');

// Kein height-Attribut gesetzt → Standardwert 120 %
const len = mask.height.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);

true 120

// Wichtig · Fallstricke

Nicht direkt zuweisen: mask.height = 100 hat keine Wirkung, im Strict Mode wirft es einen TypeError. Ändere den Wert stattdessen über mask.height.baseVal oder mit setAttribute('height', …).
maskUnits beachten: Bei objectBoundingBox wird ein Wert wie 1 als 100 % der Bounding Box verstanden und nicht als 1 Pixel. Deshalb bekommt man bei relativen Einheiten über baseVal.value oft nur eingeschränkt aussagekräftige Werte.
animVal ist nur lesbar: Bei SMIL-Animationen enthält animVal den aktuellen Wert. Schreibversuche lösen einen NoModificationAllowedError aus.
Keine CSS-Eigenschaft: Anders als bei <rect> ist height bei <mask> keine CSS-Geometrie-Eigenschaft. Mit CSS lässt sie sich daher nicht überschreiben.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Um die Elemente per Skript zu erzeugen, muss man createElementNS mit dem SVG-Namensraum verwenden. createElement('mask') liefert kein SVGMaskElement.

Siehe auch

SVGMaskElement SVGMaskElement.width SVGMaskElement.x SVGMaskElement.y SVGMaskElement.maskUnits SVGAnimatedLength SVGLength