SVGFEDisplacementMapElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.result

Beschreibung

Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFEDisplacementMapElement gibt das Attribut result des zugehörigen <feDisplacementMap>-Elements als SVGAnimatedString zurück. Der Name bezeichnet die Ausgabe dieser Filter-Primitive. Nachfolgende Primitive im selben <filter> können sie dann über ihre Attribute in oder in2 als Eingabe verwenden.

Schreibgeschützt ist nur die Eigenschaft selbst, also der Verweis auf das SVGAnimatedString-Objekt. Über result.baseVal kannst du den Namen lesen und auch ändern. Die Änderung wirkt sich direkt auf das Attribut im DOM aus. result.animVal liefert den aktuellen, gegebenenfalls animierten Wert und lässt sich nur lesen.

Nützlich ist die Eigenschaft vor allem, wenn du Filterketten per Skript aufbaust oder umbaust: Du kannst Primitive dynamisch umbenennen, Verweise prüfen oder in Editor-Werkzeugen die Struktur eines Filters auslesen. Fehlt das Attribut result, ist baseVal ein leerer String. Das Ergebnis ist dann nur für die direkt nachfolgende Primitive als implizite Eingabe verfügbar.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbarer und schreibbarer Attributwert) und animVal (nur lesbarer, gegebenenfalls animierter Wert). Ist kein Attribut gesetzt, sind beide Werte ein leerer String.

Beispiele

Result-Namen auslesen

// <svg><filter id="welle">
//   <feTurbulence type="turbulence" baseFrequency="0.05" result="rauschen"/>
//   <feDisplacementMap in="SourceGraphic" in2="rauschen" scale="20" result="verzerrt"/>
// </filter></svg>
const dispMap = document.querySelector('#welle feDisplacementMap');
console.log(dispMap.result.baseVal);
console.log(dispMap.result.animVal);

verzerrt verzerrt

Filterkette per Skript aufbauen

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

const turb = document.createElementNS(NS, 'feTurbulence');
turb.setAttribute('baseFrequency', '0.02');
turb.result.baseVal = 'noise';

const disp = document.createElementNS(NS, 'feDisplacementMap');
disp.in1.baseVal = 'SourceGraphic';
disp.in2.baseVal = turb.result.baseVal; // Verweis auf das Rauschen
disp.scale.baseVal = 15;
disp.result.baseVal = 'displaced';

const blend = document.createElementNS(NS, 'feBlend');
blend.in1.baseVal = disp.result.baseVal;
blend.in2.baseVal = 'SourceGraphic';

filter.append(turb, disp, blend);
document.querySelector('svg defs').append(filter);
console.log(disp.getAttribute('result'));

displaced

Primitive umbenennen und Verweise nachziehen

const renameResult = (primitive, newName) => {
  const oldName = primitive.result.baseVal;
  primitive.result.baseVal = newName;
  // Alle Verweise im selben Filter aktualisieren
  primitive.closest('filter')
    .querySelectorAll('[in], [in2]')
    .forEach((el) => {
      ['in', 'in2'].forEach((attr) => {
        if (el.getAttribute(attr) === oldName) el.setAttribute(attr, newName);
      });
    });
};

const dispMap = document.querySelector('feDisplacementMap');
renameResult(dispMap, 'welleV2');
console.log(dispMap.result.baseVal);

welleV2

// Wichtig · Fallstricke

Die Eigenschaft selbst ist schreibgeschützt. dispMap.result = 'x' hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere stattdessen result.baseVal.
animVal ist nur lesbar. Läuft auf result eine <set>- oder <animate>-Animation, können baseVal und animVal voneinander abweichen.
Result-Namen gelten nur innerhalb des jeweiligen <filter>-Elements. Zeigt ein in/in2-Verweis auf einen nicht vorhandenen Namen, verwenden Browser je nach Position das vorherige Ergebnis oder SourceGraphic. Solche Fehler bleiben leicht unbemerkt.
Kommt ein Name mehrfach vor, gilt für nachfolgende Verweise immer die zuletzt davor definierte Primitive mit diesem Namen.
Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und existiert gleich auf allen SVGFE*Element-Schnittstellen. Alle modernen Browser unterstützen sie.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.in1 SVGFEDisplacementMapElement.in2 SVGFEDisplacementMapElement.scale SVGAnimatedString SVGFETurbulenceElement