SVGFEMorphologyElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEMorphologyElement steht für das height-Attribut des Elements <feMorphology>. Dieses Attribut legt die Höhe der Filterprimitiv-Unterregion fest, also des Bereichs, in dem das Ergebnis der Morphologie-Operation (erode oder dilate) berechnet und ausgegeben wird.

Der Wert ist ein SVGAnimatedLength-Objekt. Es hat zwei Eigenschaften: baseVal ist der statische Wert aus dem Attribut und kann geändert werden. animVal ist der aktuell wirksame Wert, gegebenenfalls schon durch SMIL-Animationen verändert, und lässt sich nur lesen. Beide sind SVGLength-Objekte mit value, valueInSpecifiedUnits, unitType und valueAsString.

Ohne gesetztes Attribut gilt der Standardwert 100%, also die volle Höhe der Filterregion. Wie Prozentwerte und Zahlen umgerechnet werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox). Mit dieser Eigenschaft kannst du die Ausgaberegion eines Filters per Skript auslesen oder dynamisch anpassen, zum Beispiel um einen Effekt nur auf einen Teil des Bildes anzuwenden.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbar) und animVal (nur lesbar), beide vom Typ SVGLength. Die Eigenschaft selbst ist schreibgeschützt.

Beispiele

Höhe der Filterprimitiv-Region auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="200">
  <filter id="thin">
    <feMorphology id="morph" operator="erode" radius="1" height="50%" />
  </filter>
  <text x="10" y="50" filter="url(#thin)">Hallo</text>
</svg>`);

const morph = document.getElementById('morph');
const { baseVal } = morph.height;

console.log(baseVal.valueAsString);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

50% true

Höhe per Skript ändern

const svgNS = 'http://www.w3.org/2000/svg';
const morph = document.createElementNS(svgNS, 'feMorphology');
morph.setAttribute('operator', 'dilate');
morph.setAttribute('radius', '2');

// Nicht erlaubt: morph.height = ... (die Eigenschaft ist schreibgeschützt)
morph.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 80);

console.log(morph.getAttribute('height'));
console.log(morph.height.baseVal.value);

80px 80

Effekt interaktiv auf die obere Bildhälfte begrenzen

const morph = document.querySelector('feMorphology');
const slider = document.querySelector('#hoehe'); // <input type="range" min="0" max="100">

slider.addEventListener('input', () => {
  // Das Setzen von valueAsString aktualisiert das Attribut im DOM
  morph.height.baseVal.valueAsString = `${slider.value}%`;
});

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.height = 100 bewirkt nichts und wirft im strikten Modus einen TypeError. Ändere stattdessen el.height.baseVal oder rufe setAttribute('height', …) auf.
animVal nur lesen: Schreibversuche auf animVal werfen eine NoModificationAllowedError-Exception.
Einheiten: baseVal.value liefert immer Benutzereinheiten. Prozentwerte werden dabei relativ zum Bezugssystem umgerechnet. Das Ergebnis kann 0 sein oder sich unerwartet verhalten, solange das Element nicht im gerenderten Dokument hängt. Für die ursprüngliche Einheit liest du valueInSpecifiedUnits und unitType.
Nicht die Filterhöhe: Diese Eigenschaft beschreibt nur die Unterregion des Primitivs. Die Gesamtregion des Filters legt SVGFilterElement.height fest, und das Primitiv wird zusätzlich darauf zugeschnitten.
Negative Werte sind ein Fehler und deaktivieren den Filtereffekt. Der Wert 0 deaktiviert das Primitiv ebenfalls.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.width SVGFEMorphologyElement.x SVGFEMorphologyElement.y SVGAnimatedLength SVGLength SVGFilterElement.height