SVGFEDisplacementMapElement.scale — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.scale

Beschreibung

Die Eigenschaft scale des Interfaces SVGFEDisplacementMapElement spiegelt das Attribut scale des SVG-Filterprimitivs <feDisplacementMap> wider. Dieser Wert legt fest, wie stark die Pixel des Eingabebilds (in) anhand der Farbkanäle der Verschiebungskarte (in2) verschoben werden. Mit einem großen Wert wird die Verzerrung stärker, 0 bedeutet gar keine Verschiebung.

Die Eigenschaft selbst ist schreibgeschützt. Du kannst ihr also kein neues Objekt zuweisen. Sie gibt ein SVGAnimatedNumber-Objekt zurück, das zwei Werte hat: baseVal ist der im Attribut gesetzte Grundwert und lässt sich beschreiben. animVal ist der aktuelle Wert, auch während einer SMIL-Animation, und lässt sich nur lesen.

Typische Einsatzfälle sind Wellen-, Glas- oder Wassereffekte, zum Beispiel in Verbindung mit <feTurbulence>. Ändert man scale.baseVal per JavaScript, kann man die Stärke der Verzerrung gezielt steuern, etwa bei Hover-Effekten oder zeitgesteuerten Animationen mit requestAnimationFrame.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert, beschreibbar) und animVal (aktueller animierter Wert, nur lesbar). Fehlt das Attribut, ist der Wert 0.

Beispiele

Aktuellen scale-Wert auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
const dispMap = document.createElementNS(svgNS, 'feDisplacementMap');
dispMap.setAttribute('scale', '25');
filter.appendChild(dispMap);

console.log(dispMap.scale.baseVal);
console.log(dispMap.scale.animVal);

25 25

Verzerrungsstärke per Schieberegler steuern

// HTML: <input type="range" id="regler" min="0" max="100" value="20">
// SVG:  <filter id="welle"><feTurbulence baseFrequency="0.02" result="rauschen"/>
//        <feDisplacementMap id="dm" in="SourceGraphic" in2="rauschen" scale="20"/></filter>
const dm = document.getElementById('dm');
const regler = document.getElementById('regler');

regler.addEventListener('input', () => {
  dm.scale.baseVal = Number(regler.value);
  console.log(`scale = ${dm.scale.baseVal}`);
});

scale = 42 (je nach Reglerstellung)

Pulsierende Verzerrung mit requestAnimationFrame

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

const animiere = (zeit) => {
  // Schwankt zwischen 0 und 40
  dm.scale.baseVal = 20 + Math.sin(zeit / 400) * 20;
  requestAnimationFrame(animiere);
};

requestAnimationFrame(animiere);

// Wichtig · Fallstricke

Keine direkte Zuweisung: Wenn du dm.scale = 30 schreibst, hat das keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode wird ein TypeError ausgelöst. Setze stattdessen dm.scale.baseVal = 30 oder dm.setAttribute('scale', '30').
Standardwert: Fehlt das Attribut, ist der Wert 0. Dann findet keine Verschiebung statt und der Filter scheint wirkungslos zu sein.
Koordinatensystem: Der Wert wird im Koordinatensystem ausgewertet, das durch primitiveUnits des <filter>-Elements festgelegt ist. Bei objectBoundingBox werden schon kleine Werte wie 0.1 deutlich sichtbar.
Performance: Wenn scale in jedem Frame neu gesetzt wird, muss der Filter ständig neu berechnet werden. Das kostet auf großen Flächen oder auf Mobilgeräten viel Leistung.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Bei negativen Werten kehrt sich die Richtung der Verschiebung um.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.xChannelSelector SVGFEDisplacementMapElement.yChannelSelector SVGFEDisplacementMapElement.in2 SVGAnimatedNumber SVGFETurbulenceElement SVGFEDisplacementMapElement.result