SVGFECompositeElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.result

Beschreibung

Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFECompositeElement spiegelt das SVG-Attribut result eines <feComposite>-Elements wider. Der Name bezeichnet das Zwischenergebnis des Primitivs. Andere Filterprimitive innerhalb desselben <filter> können es dann über ihr in- oder in2-Attribut als Eingabe verwenden.

Der Rückgabewert ist ein SVGAnimatedString-Objekt. Die Eigenschaft selbst lässt sich nicht neu zuweisen. Über baseVal können Sie den Attributwert aber lesen und schreiben. animVal enthält den aktuellen, eventuell animierten Wert und ist nur lesbar.

Sinnvoll ist die Eigenschaft vor allem, wenn Filterketten per Skript erzeugt oder umgebaut werden. Ein Beispiel: Sie benennen Zwischenergebnisse eindeutig um oder prüfen, welche Primitive auf ein bestimmtes Ergebnis zugreifen. Fehlt das Attribut, ist baseVal eine leere Zeichenkette. Das Ergebnis steht dann nur implizit dem direkt folgenden Primitiv zur Verfügung.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, entspricht dem Attribut result) und animVal (nur lesbar, aktueller animierter Wert). Ist das Attribut nicht gesetzt, sind beide Werte "".

Beispiele

Ergebnisnamen eines feComposite auslesen

// HTML: <svg><filter id="f"><feComposite id="comp" in="SourceGraphic" in2="BackgroundImage" operator="over" result="kombiniert"/></filter></svg>
const comp = document.getElementById('comp');
console.log(comp.result instanceof SVGAnimatedString);
console.log(comp.result.baseVal);
console.log(comp.result.animVal);

true kombiniert kombiniert

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 = 'schatten';

const blur = document.createElementNS(NS, 'feGaussianBlur');
blur.setAttribute('in', 'SourceAlpha');
blur.setAttribute('stdDeviation', '3');
blur.result.baseVal = 'weich';

const comp = document.createElementNS(NS, 'feComposite');
comp.setAttribute('in', 'SourceGraphic');
comp.setAttribute('in2', 'weich');
comp.setAttribute('operator', 'over');
comp.result.baseVal = 'endergebnis';

filter.append(blur, comp);
svg.append(filter);
document.body.append(svg);

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

endergebnis

Ergebnis umbenennen und Referenzen nachziehen

const renameResult = (filter, alt, neu) => {
  filter.querySelectorAll('feComposite').forEach((el) => {
    if (el.result.baseVal === alt) el.result.baseVal = neu;
    if (el.in1.baseVal === alt) el.in1.baseVal = neu;
    if (el.in2.baseVal === alt) el.in2.baseVal = neu;
  });
};

const filter = document.querySelector('filter');
renameResult(filter, 'kombiniert', 'ebene1');
console.log(filter.querySelector('feComposite').result.baseVal);

ebene1

// Wichtig · Fallstricke

Schreibgeschützt heißt hier: Die Anweisung el.result = 'x' hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie den Wert stattdessen über el.result.baseVal oder setAttribute('result', …).
Ergebnisnamen gelten nur innerhalb des jeweiligen <filter>. Wird ein Name mehrfach vergeben, verweist eine Referenz auf das letzte vorangehende Primitiv mit diesem Namen.
Referenziert in oder in2 einen Namen, den es nicht gibt, behandeln Browser das wie eine fehlende Angabe und nehmen das vorherige Ergebnis bzw. SourceGraphic. Tippfehler fallen deshalb oft nicht auf.
Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und existiert gleichermaßen bei allen SVGFE*Element-Schnittstellen.
Kompatibilität: Alle aktuellen Browser unterstützen die Eigenschaft. Das Attribut BackgroundImage als Eingabe wird dagegen in den meisten Browsern nicht unterstützt.

Siehe auch

SVGFECompositeElement SVGAnimatedString SVGFECompositeElement.in1 SVGFECompositeElement.in2 SVGFECompositeElement.operator SVGFilterElement SpeechRecognitionEvent.resultIndex