SVGComponentTransferFunctionElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGComponentTransferFunctionElement extends SVGElement

Beschreibung

SVGComponentTransferFunctionElement ist ein abstraktes Basis-Interface. Es wird nie direkt instanziiert, sondern von den vier Elementen SVGFEFuncRElement, SVGFEFuncGElement, SVGFEFuncBElement und SVGFEFuncAElement geerbt. Diese Elemente stehen als Kinder eines <feComponentTransfer>-Filters und legen fest, wie jeder einzelne Farbkanal (Rot, Grün, Blau, Alpha) eines Bildes umgerechnet wird – etwa für Helligkeit, Kontrast, Gammakorrektur, Posterisierung oder Invertierung.

Das Interface stellt die Attribute der Übertragungsfunktion als animierbare Eigenschaften bereit:

type (SVGAnimatedEnumeration) – Art der Funktion: identity, table, discrete, linear oder gamma.
tableValues (SVGAnimatedNumberList) – Stützwerte für table und discrete.
slope, intercept (SVGAnimatedNumber) – Steigung und Achsenabschnitt für linear (C' = slope · C + intercept).
amplitude, exponent, offset (SVGAnimatedNumber) – Parameter für gamma (C' = amplitude · C^exponent + offset).

Zusätzlich definiert es die Konstanten SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN (0), _IDENTITY (1), _TABLE (2), _DISCRETE (3), _LINEAR (4) und _GAMMA (5), mit denen type.baseVal gelesen und gesetzt wird. Jede Eigenschaft besitzt einen baseVal (Wert des Attributs, änderbar) und einen animVal (aktueller, ggf. durch SMIL animierter Wert, nur lesbar).

Einsatzgebiet: Wenn Sie Farbfilter per JavaScript dynamisch steuern möchten – z. B. einen Helligkeitsregler, der live den slope eines Filters verändert – greifen Sie über dieses Interface typisiert auf die Werte zu, statt Attribut-Strings zu parsen.

Rückgabewert

Typ

SVGComponentTransferFunctionElement

Beschreibung

Kein Konstruktor verfügbar. Instanzen entstehen über document.createElementNS('http://www.w3.org/2000/svg', 'feFuncR') (bzw. feFuncG, feFuncB, feFuncA) oder durch Auslesen vorhandener Elemente aus dem DOM.

Beispiele

Filter mit linearer Übertragungsfunktion per JavaScript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'helligkeit';
const transfer = document.createElementNS(SVG_NS, 'feComponentTransfer');

// Gleiche lineare Funktion für R, G und B
for (const kanal of ['feFuncR', 'feFuncG', 'feFuncB']) {
  const func = document.createElementNS(SVG_NS, kanal);
  func.setAttribute('type', 'linear');
  func.setAttribute('slope', '1.5');
  func.setAttribute('intercept', '0');
  transfer.append(func);
}

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

const r = transfer.firstElementChild;
console.log(r instanceof SVGComponentTransferFunctionElement);
console.log(r.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_LINEAR);
console.log(r.slope.baseVal);

true true 1.5

Helligkeitsregler: slope live ändern

// HTML: <input type="range" id="regler" min="0" max="3" step="0.1" value="1">
// und ein <svg> mit <filter id="helligkeit"> wie oben
const funktionen = document.querySelectorAll('#helligkeit feFuncR, #helligkeit feFuncG, #helligkeit feFuncB');

document.querySelector('#regler').addEventListener('input', (event) => {
  const wert = Number(event.target.value);
  for (const func of funktionen) {
    // Typisierter Zugriff statt setAttribute
    func.slope.baseVal = wert;
  }
});

// Filter auf ein Bild anwenden
document.querySelector('img').style.filter = 'url(#helligkeit)';

Funktionstyp umstellen und Tabellenwerte auslesen

const SVG_NS = 'http://www.w3.org/2000/svg';
const func = document.createElementNS(SVG_NS, 'feFuncR');

// Invertierung über eine Tabelle
func.type.baseVal = SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_TABLE;
func.setAttribute('tableValues', '1 0');

console.log(func.getAttribute('type'));
const liste = func.tableValues.baseVal;
const werte = Array.from({ length: liste.numberOfItems }, (_, i) => liste.getItem(i).value);
console.log(werte);

// Standardwerte der Gamma-Parameter
console.log(func.amplitude.baseVal, func.exponent.baseVal, func.offset.baseVal);

table [1, 0] 1 1 0

// Wichtig · Fallstricke

Kein Konstruktor: new SVGComponentTransferFunctionElement() wirft einen TypeError. SVG-Elemente immer mit createElementNS und dem SVG-Namensraum erzeugen. document.createElement('feFuncR') liefert nur ein wirkungsloses HTMLUnknownElement.
Farbraum: Filter rechnen standardmäßig im Farbraum linearRGB. Wer Werte erwartet, die zu sRGB-Farbwerten passen, sollte color-interpolation-filters="sRGB" auf dem Filter oder dem Primitive setzen.
Nur passende Attribute wirken: slope/intercept gelten nur bei linear, amplitude/exponent/offset nur bei gamma und tableValues nur bei table/discrete. Fehlt ein Kanal-Element, bleibt dieser Kanal unverändert (identity).
baseVal vs. animVal: Schreiben Sie immer in baseVal. animVal ist nur lesbar und gibt bei SMIL-Animation den aktuellen Wert wieder.
Werden mehrere gleichartige Kinder angegeben (z. B. zwei <feFuncR>), gilt nur das letzte.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Aufwendige Filter auf großen Flächen können beim Rendern Leistung kosten; für einfache Effekte sind CSS-Filter wie brightness() oft günstiger.

Siehe auch

SVGFEComponentTransferElement SVGAnimateTransformElement SVGAnimateMotionElement SVGLinearGradientElement HTMLTableSectionElement