SVGFEMergeElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMergeElement.height

Beschreibung

Die Eigenschaft height des Interfaces SVGFEMergeElement gibt das height-Attribut des <feMerge>-Elements zurück. Zusammen mit x, y und width legt sie den Filterprimitiv-Teilbereich fest, also das Rechteck, auf das das Ergebnis der Zusammenführung beschränkt wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal liest und schreibst du den im Markup gesetzten Grundwert (ein SVGLength), über animVal liest du den aktuellen, gegebenenfalls per SMIL animierten Wert. Die Eigenschaft selbst ist schreibgeschützt; das Objekt dahinter kannst du aber ändern.

Fehlt das Attribut, gilt standardmäßig 100% der Höhe des Filterbereichs. Wie Prozentwerte und reine Zahlen gedeutet werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert als SVGLength) und animVal (aktueller Animationswert, schreibgeschützt).

Beispiele

Höhe eines feMerge-Elements auslesen

// <svg><filter id="glow"><feMerge id="merge" y="0" height="150">…</feMerge></filter></svg>
const merge = document.getElementById('merge');
const { baseVal, animVal } = merge.height;
console.log(baseVal.value);             // Zahlenwert in Benutzereinheiten
console.log(baseVal.valueAsString);     // Wert wie im Attribut
console.log(animVal.value);             // aktueller (animierter) Wert

150 "150" 150

Höhe per Skript ändern

const merge = document.querySelector('filter#glow feMerge');
// Neuen Wert in Benutzereinheiten setzen
merge.height.baseVal.value = 200;
console.log(merge.getAttribute('height'));

// Prozentwert mit expliziter Einheit setzen
merge.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(merge.getAttribute('height'));

"200" "50%"

feMerge dynamisch erzeugen und Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const merge = document.createElementNS(SVG_NS, 'feMerge');
['blur', 'SourceGraphic'].forEach((input) => {
  const node = document.createElementNS(SVG_NS, 'feMergeNode');
  node.setAttribute('in', input);
  merge.append(node);
});
// Ohne height-Attribut gilt 100 %
console.log(merge.height.baseVal.valueAsString);
console.log(merge.hasAttribute('height'));

"100%" false

// Wichtig · Fallstricke

Schreibgeschützt: merge.height = 100 schlägt stillschweigend fehl (im Strict Mode mit TypeError). Ändere stattdessen merge.height.baseVal.value oder nutze setAttribute('height', …).
animVal ist immer schreibgeschützt. Ohne laufende Animation stimmt es mit baseVal überein.
Bei Prozentwerten kann baseVal.value erst sinnvoll in Benutzereinheiten umgerechnet werden, wenn das Element im gerenderten Dokument hängt. Bei losgelösten Elementen können die Ergebnisse von Browser zu Browser abweichen.
Negative Werte sind ein Fehler, und 0 schaltet den Effekt des Filterprimitivs ab. Das Element wird dann nicht gerendert.
Wird von allen modernen Browsern unterstützt. Bei der Einbindung von SVG als <img> hast du keinen Skriptzugriff, nutze dann Inline-SVG.

Siehe auch

SVGFEMergeElement SVGFEMergeElement.width SVGFEMergeElement.x SVGFEMergeElement.y SVGFEMergeElement.result SVGAnimatedLength SVGLength SVGFEMergeNodeElement