SVGFEBlendElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.height

Beschreibung

Die Eigenschaft height des Interfaces SVGFEBlendElement steht für das Attribut height eines <feBlend>-Elements. Zusammen mit x, y und width bestimmt es den Primitive-Subregion-Bereich. Das ist das Rechteck, in dem die Mischoperation berechnet und ausgegeben wird.

Die Eigenschaft ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Der Wert selbst lässt sich trotzdem ändern, und zwar über das zurückgegebene SVGAnimatedLength. Mit baseVal bekommst du ein beschreibbares SVGLength, mit animVal den aktuellen, eventuell durch SMIL animierten Wert (nur lesbar).

Fehlt das Attribut, gilt der Standardwert 100%, bezogen auf die Filterregion. Welches Koordinatensystem gilt, legt primitiveUnits am übergeordneten <filter> fest: userSpaceOnUse (Standard) oder objectBoundingBox.

Die Eigenschaft ist praktisch, wenn du Filtereffekte per Skript auf einen Bildbereich beschränken oder dynamisch anpassen willst, zum Beispiel bei interaktiven Überblendungen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (beschreibbares SVGLength) und animVal (aktueller animierter Wert, nur lesbar). Es beschreibt die Höhe des Teilbereichs der Filter-Primitive.

Beispiele

Höhe eines feBlend-Elements auslesen

// <svg><filter id="f"><feBlend id="blend" in="SourceGraphic" in2="BackgroundImage" mode="multiply" height="80"/></filter></svg>
const blend = document.getElementById('blend');

console.log(blend.height.baseVal.value);
console.log(blend.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

80 true

Standardwert ohne gesetztes Attribut

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

// Ohne height-Attribut gilt 100 %
console.log(blend.height.baseVal.valueAsString);
console.log(blend.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

100% true

Höhe per Skript dynamisch ändern

const blend = document.querySelector('#f feBlend');
const slider = document.querySelector('#hoehe');

slider.addEventListener('input', () => {
  // baseVal ist beschreibbar, height selbst nicht
  blend.height.baseVal.value = Number(slider.value);
  console.log('Attribut jetzt:', blend.getAttribute('height'));
});

Attribut jetzt: 120

Einheit gezielt setzen mit newValueSpecifiedUnits

const blend = document.querySelector('feBlend');

// Höhe auf 50 % der Filterregion setzen
blend.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

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

50%

// Wichtig · Fallstricke

Schreibgeschützt: blend.height = 100 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen blend.height.baseVal.value oder nutze setAttribute('height', …).
animVal: Dieser Wert ist nur lesbar. Er kann bei laufender SMIL-Animation von baseVal abweichen.
Prozentwerte: Bei 100% kann baseVal.value je nach Browser und Kontext (etwa bei nicht gerendertem Element) 0 liefern oder eine Exception werfen. Verlässlicher ist valueAsString bzw. valueInSpecifiedUnits.
primitiveUnits: Steht am <filter> primitiveUnits="objectBoundingBox", gilt die Höhe als Bruchteil der Begrenzungsbox (z. B. 0.5) und nicht in Benutzereinheiten.
Negative Werte sind ein Fehler, der Wert 0 schaltet die Primitive ab.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Eingang BackgroundImage für in2 wird von den meisten Browsern jedoch nicht unterstützt.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.width SVGFEBlendElement.x SVGFEBlendElement.y SVGAnimatedLength SVGLength SVGFilterElement