SVGFEComponentTransferElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEComponentTransferElement.result

Beschreibung

Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFEComponentTransferElement spiegelt das SVG-Attribut result des Elements <feComponentTransfer> wider. Der Wert ist ein SVGAnimatedString-Objekt. Es hat zwei Eigenschaften: baseVal (der im Markup gesetzte, beschreibbare Wert) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert, nur lesbar).

Über den Namen in result können nachfolgende Filterprimitive innerhalb desselben <filter> das Ausgabebild dieses Primitivs über ihr Attribut in oder in2 ansprechen. So baust du Filterketten, in denen zum Beispiel eine Tonwertkorrektur per feComponentTransfer zuerst ausgeführt und danach mit dem Originalbild verrechnet wird.

„Schreibgeschützt“ bezieht sich nur auf die Eigenschaft selbst: Du kannst ihr kein neues Objekt zuweisen. Den Namen änderst du über result.baseVal oder mit setAttribute("result", …). Fehlt das Attribut, ist baseVal ein leerer String. Das Ergebnis ist dann nur implizit als Eingabe des direkt folgenden Primitivs verfügbar.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (Attributwert als string, beschreibbar) und animVal (animierter Wert, nur lesbar). Ohne gesetztes Attribut ist baseVal ein leerer String.

Beispiele

Ergebnisnamen auslesen

// <filter id="f"><feComponentTransfer id="ct" result="hell">…</feComponentTransfer></filter>
const ct = document.getElementById('ct');
console.log(ct.result instanceof SVGAnimatedString);
console.log(ct.result.baseVal);
console.log(ct.result.animVal);

true hell hell

Filterkette per Skript erzeugen und verknüpfen

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

const ct = document.createElementNS(NS, 'feComponentTransfer');
ct.setAttribute('in', 'SourceGraphic');
ct.result.baseVal = 'korrigiert'; // Name setzen

['feFuncR', 'feFuncG', 'feFuncB'].forEach((tag) => {
  const fn = document.createElementNS(NS, tag);
  fn.setAttribute('type', 'linear');
  fn.setAttribute('slope', '1.5');
  fn.setAttribute('intercept', '-0.25');
  ct.append(fn);
});

const blend = document.createElementNS(NS, 'feBlend');
blend.setAttribute('in', ct.result.baseVal); // Ergebnis referenzieren
blend.setAttribute('in2', 'SourceGraphic');
blend.setAttribute('mode', 'multiply');

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

korrigiert

Fehlendes result-Attribut erkennen

const transfers = document.querySelectorAll('feComponentTransfer');
transfers.forEach((el, i) => {
  const name = el.result.baseVal || '(unbenannt)';
  console.log(`Primitiv ${i}: ${name}`);
});

Primitiv 0: hell Primitiv 1: (unbenannt)

// Wichtig · Fallstricke

Eine direkte Zuweisung wie el.result = 'x' ändert nichts; im Strict Mode kann sie sogar einen TypeError auslösen. Ändere stattdessen el.result.baseVal.
animVal ist nur lesbar und weicht nur bei laufender SMIL-Animation (<animate attributeName=\"result\">) von baseVal ab.
Die Namen in result gelten nur innerhalb desselben <filter>. Tragen mehrere Primitive denselben Namen, bezieht sich ein späteres in auf das zuletzt davor definierte Primitiv mit diesem Namen.
Verweist in auf einen Namen, den es nicht gibt, verwenden Browser je nach Implementierung das vorherige Ergebnis oder SourceGraphic. Bei tippfehleranfälligen Namen lohnt sich deshalb eine Prüfung per Skript.
Elemente musst du mit createElementNS im SVG-Namensraum erzeugen, sonst fehlt die Eigenschaft result.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Sie ist Teil von SVGFilterPrimitiveStandardAttributes und existiert gleichermaßen bei allen SVGFE*Element-Schnittstellen.

Siehe auch

SVGFEComponentTransferElement SVGFEComponentTransferElement.in1 SVGAnimatedString SVGFEFuncRElement SVGFilterElement SVGFEBlendElement.result