SVGFEComponentTransferElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEComponentTransferElement extends SVGElement

Beschreibung

SVGFEComponentTransferElement ist die DOM-Darstellung des SVG-Elements <feComponentTransfer>. Dieses Filterprimitiv rechnet jeden Farbkanal eines Eingabebildes für sich um. Welche Funktion auf welchen Kanal wirkt, legen die Kindelemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> fest. Sie kennen die Typen identity, table, discrete, linear und gamma. Fehlt ein Kanal-Element, bleibt dieser Kanal unverändert.

Typische Einsatzgebiete sind Helligkeit und Kontrast, Invertieren, Gammakorrektur, Posterisierung, Duoton-Effekte und die Steuerung der Deckkraft über <feFuncA>. Mit CSS (filter: url(#id)) lassen sich solche Filter auch auf HTML-Elemente anwenden.

Die Schnittstelle selbst ist schlank. in1 (SVGAnimatedString) gibt die Eingabequelle an. Die gemeinsamen Filterprimitiv-Attribute x, y, width, height (jeweils SVGAnimatedLength) und result (SVGAnimatedString) legen den Filterbereich und den Namen des Ergebnisses fest. Die eigentliche Rechenlogik steckt in den Kindelementen. Das sind Instanzen von SVGComponentTransferFunctionElement mit Eigenschaften wie type, tableValues, slope, intercept, amplitude, exponent und offset.

Alle Eigenschaften sind animierte Werte. Lesen kann man sie über .baseVal bzw. .animVal. Zum Ändern setzt man am einfachsten mit setAttribute() das passende Attribut. So lassen sich Filter zur Laufzeit dynamisch anpassen, etwa mit einem Schieberegler.

Parameter

Name	Typ	Default	Beschreibung
$in1	SVGAnimatedString	SourceGraphic bzw. Ergebnis des vorherigen Primitivs	Schreibgeschützte Eigenschaft, entspricht dem Attribut `in`. Gibt die Eingabe an, z. B. `SourceGraphic`, `SourceAlpha` oder einen `result`-Namen.
$result	SVGAnimatedString		Name des Ergebnisses. Spätere Primitive können es über `in` verwenden.
$x / y	SVGAnimatedLength	0%	Position des Teilbereichs, auf den das Filterprimitiv wirkt.
$width / height	SVGAnimatedLength	100%	Größe des Teilbereichs, auf den das Filterprimitiv wirkt.

Rückgabewert

Typ

SVGFEComponentTransferElement

Beschreibung

Instanzen erhält man über document.createElementNS("http://www.w3.org/2000/svg", "feComponentTransfer") oder über DOM-Abfragen. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Invertierungsfilter per Skript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';

const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '0');
svg.setAttribute('height', '0');

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'invert';

const transfer = document.createElementNS(SVG_NS, 'feComponentTransfer');

// R, G und B über eine Tabelle 1 → 0 umkehren
for (const kanal of ['feFuncR', 'feFuncG', 'feFuncB']) {
  const func = document.createElementNS(SVG_NS, kanal);
  func.setAttribute('type', 'table');
  func.setAttribute('tableValues', '1 0');
  transfer.append(func);
}

filter.append(transfer);
svg.append(filter);
document.body.append(svg);

// Auf ein beliebiges HTML-Element anwenden
document.querySelector('img').style.filter = 'url(#invert)';

console.log(transfer instanceof SVGFEComponentTransferElement);
console.log(transfer.in1.baseVal);

true ""

Helligkeit mit einem Schieberegler steuern

// HTML:
// <svg width="0" height="0"><filter id="hell">
//   <feComponentTransfer id="ct">
//     <feFuncR type="linear" slope="1"/>
//     <feFuncG type="linear" slope="1"/>
//     <feFuncB type="linear" slope="1"/>
//   </feComponentTransfer>
// </filter></svg>
// <input id="regler" type="range" min="0" max="2" step="0.1" value="1">
// <img src="foto.jpg" style="filter:url(#hell)">

const ct = document.getElementById('ct');
const regler = document.getElementById('regler');

regler.addEventListener('input', () => {
  for (const func of ct.children) {
    func.setAttribute('slope', regler.value);
  }
  console.log('slope:', ct.firstElementChild.slope.baseVal);
});

slope: 1.5 (beim Verschieben auf 1.5)

Eigenschaften auslesen und Eingabe verketten

// <filter id="f">
//   <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
//   <feComponentTransfer in="blur" result="poster">
//     <feFuncR type="discrete" tableValues="0 0.5 1"/>
//   </feComponentTransfer>
// </filter>

const ct = document.querySelector('#f feComponentTransfer');
console.log(ct.in1.baseVal);
console.log(ct.result.baseVal);

const funcR = ct.querySelector('feFuncR');
console.log(funcR.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE);
console.log([...funcR.tableValues.baseVal].map(n => n.value));

blur poster true [0, 0.5, 1]

// Wichtig · Fallstricke

Namensraum: SVG-Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', …) erzeugt werden. createElement('feComponentTransfer') liefert nur ein wirkungsloses HTMLUnknownElement.
Schreibgeschützte Animationswerte: in1, result usw. lassen sich nicht direkt zuweisen. Bei Strings geht el.in1.baseVal = '…', üblicher und zuverlässiger ist aber setAttribute().
Farbraum: Filter rechnen standardmäßig in linearRGB (color-interpolation-filters). Für Ergebnisse, die zu CSS-Farbwerten passen, setzt man color-interpolation-filters="sRGB" am <filter>.
Vormultipliziertes Alpha: Die Funktionen wirken auf nicht vormultiplizierte Farbwerte. Bei halbtransparenten Pixeln kann das Ergebnis trotzdem überraschen.
Versteckter Container: Ein SVG, das den Filter nur definiert, darf nicht display:none haben, weil einige Browser den Filter dann ignorieren. Besser ist width="0" height="0" oder position:absolute.
Leistung: Häufige Änderungen an großen, gefilterten Flächen kosten viel Rechenzeit. Eingaben von Schiebereglern sollte man bei Bedarf drosseln.
Kompatibilität: Wird von allen modernen Browsern unterstützt. filter: url(#id) auf HTML-Elementen funktioniert in aktuellen Versionen von Chrome, Firefox und Safari.

Siehe auch

SVGComponentTransferFunctionElement SVGFECompositeElement SVGAnimateTransformElement SVGFEColorMatrixElement SVGFEConvolveMatrixElement