SVGFEDisplacementMapElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEDisplacementMapElement steht für das Attribut height des SVG-Elements <feDisplacementMap>. Dieses Attribut legt die Höhe des Filterprimitiv-Teilbereichs fest, also die Höhe der Fläche, in der das Ergebnis der Verschiebung (Displacement) berechnet und abgeschnitten wird.

Man bekommt ein SVGAnimatedLength-Objekt zurück. Die Eigenschaft selbst lässt sich nicht neu zuweisen. Über height.baseVal kannst du den Grundwert aber lesen und ändern, etwa mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). height.animVal gibt den aktuellen Wert zurück, nachdem eine SMIL-Animation angewendet wurde, und lässt sich nur lesen.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Wie der Wert gedeutet wird, hängt von primitiveUnits am übergeordneten <filter> ab: Bei userSpaceOnUse (Standard) sind es Benutzereinheiten, bei objectBoundingBox Anteile des Begrenzungsrahmens des gefilterten Elements.

Verwende die Eigenschaft, wenn du einen Verzerrungseffekt (z. B. Wellen-, Glas- oder Hitzeflimmer-Effekt) per Skript auf einen bestimmten vertikalen Bereich begrenzen oder diesen Bereich dynamisch anpassen willst.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (veränderbare SVGLength, entspricht dem Attributwert) und animVal (schreibgeschützte SVGLength mit dem aktuell animierten Wert).

Beispiele

Höhe des Filterprimitivs auslesen

// HTML: <svg><filter id="welle"><feTurbulence result="rauschen" baseFrequency="0.02"/>
//   <feDisplacementMap id="dm" in="SourceGraphic" in2="rauschen" scale="20" y="0" height="120"/>
// </filter></svg>
const dm = document.querySelector('#dm');

console.log(dm.height instanceof SVGAnimatedLength);
console.log(dm.height.baseVal.value);
console.log(dm.height.baseVal.valueAsString);

true 120 120

Verzerrungsbereich dynamisch ändern

const dm = document.querySelector('#dm');

// Grundwert per baseVal setzen (die Eigenschaft height selbst ist nur lesbar)
dm.height.baseVal.value = 60;
console.log(dm.getAttribute('height'));

// Mit Einheit setzen: 50 % des Filterbereichs
dm.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(dm.getAttribute('height'));

60 50%

Element per Skript erzeugen und Höhe setzen

const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
filter.id = 'glas';

const dm = document.createElementNS(NS, 'feDisplacementMap');
dm.setAttribute('in', 'SourceGraphic');
dm.setAttribute('scale', '15');
dm.setAttribute('height', '80');
filter.append(dm);
document.querySelector('svg').append(filter);

// Bereich beim Scrollen vergrößern
window.addEventListener('scroll', () => {
  dm.height.baseVal.value = 80 + Math.min(window.scrollY, 200);
});
console.log(dm.height.baseVal.value);

80

// Wichtig · Fallstricke

Nur lesbar: dm.height = 100 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändere den Wert über dm.height.baseVal oder mit setAttribute('height', …).
Standardwert: Ohne Attribut liefert baseVal den Wert 100% als Prozent-Länge. baseVal.value wird dann relativ zum Filterbereich umgerechnet, was bei nicht gerenderten Elementen ungenaue Werte ergeben kann.
Einheiten: Bei primitiveUnits="objectBoundingBox" sind Werte wie 0.5 Anteile, keine Pixel.
Negative Werte sind ungültig: Sie deaktivieren das Filterprimitiv, der Wert 0 ebenso.
animVal weicht nur bei SMIL-Animationen (<animate>) von baseVal ab. CSS-Animationen wirken sich darauf nicht aus.
Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.width SVGFEDisplacementMapElement.x SVGFEDisplacementMapElement.y SVGFEDisplacementMapElement.scale SVGAnimatedLength SVGLength