SVGFEBlendElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.result

Beschreibung

Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFEBlendElement entspricht dem Attribut result eines <feBlend>-Elements. Sie gibt ein SVGAnimatedString-Objekt zurück. Dessen Eigenschaft baseVal enthält den im Markup gesetzten Wert, animVal den aktuell wirksamen Wert, auch während einer SMIL-Animation.

In einer Filterkette gibt result dem Ausgabebild eines Primitivs einen Namen. Nachfolgende Primitive können über ihre Attribute in bzw. in2 auf diesen Namen verweisen. Ohne result geht die Ausgabe nur implizit an das direkt folgende Primitiv weiter.

Die Eigenschaft selbst kann man nicht neu zuweisen. Der Wert lässt sich aber über result.baseVal oder setAttribute('result', …) ändern. So kann man Filterketten zur Laufzeit analysieren oder umbauen.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (Grundwert, beschreibbar) und animVal (animierter Wert, schreibgeschützt). Fehlt das Attribut, ist baseVal ein leerer String.

Beispiele

Ergebnisnamen eines feBlend-Primitivs auslesen

// <filter id="mix">
//   <feFlood flood-color="tomato" result="farbe"/>
//   <feBlend in="SourceGraphic" in2="farbe" mode="multiply" result="gemischt"/>
// </filter>
const blend = document.querySelector('#mix feBlend');
console.log(blend.result.baseVal);
console.log(blend.result.animVal);

gemischt gemischt

Ergebnisnamen zur Laufzeit ändern und Verweis anpassen

const blend = document.querySelector('#mix feBlend');
const composite = document.querySelector('#mix feComposite');

// Neuen Namen vergeben – result selbst ist readonly, baseVal nicht
blend.result.baseVal = 'blendAusgabe';

// Nachfolgendes Primitiv auf den neuen Namen verweisen lassen
composite.in1.baseVal = 'blendAusgabe';

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

blendAusgabe

Filter dynamisch erzeugen und Ergebnisse verketten

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

const blur = document.createElementNS(NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '4');
blur.setAttribute('result', 'weich');

const blend = document.createElementNS(NS, 'feBlend');
blend.setAttribute('in', 'SourceGraphic');
blend.setAttribute('in2', 'weich');
blend.setAttribute('mode', 'screen');
blend.result.baseVal = 'leuchten';

filter.append(blur, blend);
document.querySelector('svg defs').append(filter);

console.log(blend.result.baseVal, blend.in2.baseVal);

leuchten weich

// Wichtig · Fallstricke

Wer blend.result = 'x' zuweist, ändert nichts, im Strict Mode wirft das einen TypeError. Ändern Sie stattdessen result.baseVal.
Namen gelten nur innerhalb desselben <filter>. Gibt es einen Namen mehrfach, verweist in/in2 auf das letzte vorhergehende Primitiv mit diesem Namen.
Verweist in/in2 auf einen Namen, den es nicht gibt, wird der Verweis wie ein fehlendes in behandelt. Das führt oft zu unerwarteten Ergebnissen, ohne dass eine Fehlermeldung erscheint.
Elemente muss man mit createElementNS im SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft nicht.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Sie stammt aus der gemeinsamen Mixin-Schnittstelle SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.in1 SVGFEBlendElement.in2 SVGFEBlendElement.mode SVGAnimatedString SVGFilterElement PerformanceTiming.requestStart