SVGFETurbulenceElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.result

Beschreibung

Die Eigenschaft result der Schnittstelle SVGFETurbulenceElement spiegelt das SVG-Attribut result eines <feTurbulence>-Elements wider. Über diesen Namen können nachfolgende Filterprimitive innerhalb desselben <filter> das erzeugte Rauschbild per in- oder in2-Attribut als Eingabe verwenden, etwa in <feDisplacementMap> oder <feComposite>.

Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Der enthaltene Wert lässt sich aber über result.baseVal lesen und ändern, was das Attribut im DOM direkt aktualisiert. result.animVal liefert den aktuell wirksamen (ggf. animierten) Wert.

Praktisch nützlich ist result, wenn du Filterketten per Skript aufbaust, analysierst oder umbenennst – zum Beispiel, um zu prüfen, welche Primitive ein Turbulenz-Ergebnis weiterverarbeiten, oder um mehrere Filter dynamisch zu verketten.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, entspricht dem Attribut result) und animVal (schreibgeschützt, aktueller animierter Wert). Ist kein Attribut gesetzt, ist baseVal ein leerer String.

Beispiele

Ergebnisnamen eines feTurbulence-Elements auslesen

// <svg><filter id="rauschen"><feTurbulence id="turb" type="fractalNoise" baseFrequency="0.05" result="noise"/></filter></svg>
const turb = document.getElementById('turb');

console.log(turb.result instanceof SVGAnimatedString);
console.log(turb.result.baseVal);
console.log(turb.result.animVal);

true noise noise

Filterkette per Skript aufbauen und verknüpfen

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

const turb = document.createElementNS(NS, 'feTurbulence');
turb.setAttribute('baseFrequency', '0.02');
turb.setAttribute('numOctaves', '3');
turb.result.baseVal = 'turbulenz'; // setzt das Attribut result

const disp = document.createElementNS(NS, 'feDisplacementMap');
disp.setAttribute('in', 'SourceGraphic');
disp.setAttribute('in2', turb.result.baseVal); // Rauschen als Verschiebungskarte
disp.setAttribute('scale', '20');

filter.append(turb, disp);
svg.append(filter);
document.body.append(svg);

console.log(turb.getAttribute('result'));

turbulenz

Ergebnis umbenennen und Verweise mitziehen

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

const turb = document.querySelector('feTurbulence');
renameResult(turb, 'rauschen2');
console.log(turb.result.baseVal);

rauschen2

// Wichtig · Fallstricke

Schreibgeschützt heißt nicht unveränderlich: turb.result = 'x' hat keine Wirkung (im Strict Mode ggf. TypeError). Ändere stattdessen turb.result.baseVal.
Ergebnisnamen gelten nur innerhalb desselben <filter>-Elements. Verweist in auf einen nicht existierenden Namen, verwenden Browser stillschweigend das Ergebnis des vorherigen Primitivs bzw. SourceGraphic – Tippfehler fallen daher oft nicht auf.
Fehlt das Attribut, ist baseVal ein leerer String; das Primitiv ist dann nur implizit für das direkt folgende Primitiv verfügbar.
Die Eigenschaft ist Teil von SVGFilterPrimitiveStandardAttributes und wird von allen Browsern mit SVG-Filterunterstützung (Chrome, Firefox, Safari, Edge) unterstützt. feTurbulence ist rechenintensiv – große Filterflächen mit hohem numOctaves können die Rendering-Performance deutlich verschlechtern.

Siehe auch

SVGFETurbulenceElement SVGAnimatedString SVGFETurbulenceElement.baseFrequencyX SVGFEDisplacementMapElement.in2 SVGFilterElement PaymentRequestEvent.paymentRequestId SVGFETileElement.result