SVGFEFuncBElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEFuncBElement extends SVGComponentTransferFunctionElement

Beschreibung

SVGFEFuncBElement ist die DOM-Schnittstelle des SVG-Elements <feFuncB>. Das Element steht immer als Kind eines <feComponentTransfer>-Filterprimitivs und legt fest, wie der Blaukanal jedes Pixels umgerechnet wird. Die Geschwister <feFuncR>, <feFuncG> und <feFuncA> erledigen das für Rot, Grün und Alpha.

Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Alles erbt sie von SVGComponentTransferFunctionElement, zum Beispiel type, tableValues, slope, intercept, amplitude, exponent und offset. Jede dieser Eigenschaften ist ein animierbares Objekt (SVGAnimatedEnumeration, SVGAnimatedNumber oder SVGAnimatedNumberList). Den aktuellen Wert liest du über .baseVal bzw. .animVal.

Typische Einsatzfälle sind Farbkorrekturen, Duoton- und Posterisierungseffekte, Kontrastanpassungen oder das gezielte Entfernen bzw. Verstärken von Blauanteilen, etwa für einen Warmfilter oder Nachtmodus. Per JavaScript kannst du solche Filter zur Laufzeit erzeugen und ändern, etwa gesteuert über einen Schieberegler.

Neue Elemente musst du mit document.createElementNS('http://www.w3.org/2000/svg', 'feFuncB') erzeugen. Mit document.createElement entsteht kein SVG-Element, und der Filter bleibt wirkungslos.

Parameter

Name	Typ	Default	Beschreibung
$type	SVGAnimatedEnumeration	identity	Geerbt. Art der Übertragungsfunktion: `identity`, `table`, `discrete`, `linear` oder `gamma`. Die Zahlenwerte stehen als Konstanten bereit, z. B. `SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_LINEAR` (4).
$tableValues	SVGAnimatedNumberList	leere Liste	Geerbt. Stützwerte für `table` und `discrete`.
$slope	SVGAnimatedNumber	1	Geerbt. Steigung bei `type="linear"`.
$intercept	SVGAnimatedNumber	0	Geerbt. Achsenabschnitt bei `type="linear"`.
$amplitude	SVGAnimatedNumber	1	Geerbt. Amplitude bei `type="gamma"`.
$exponent	SVGAnimatedNumber	1	Geerbt. Exponent bei `type="gamma"`.
$offset	SVGAnimatedNumber	0	Geerbt. Versatz bei `type="gamma"`.

Rückgabewert

Typ

SVGFEFuncBElement

Beschreibung

Das DOM-Objekt des <feFuncB>-Elements, z. B. aus querySelector oder createElementNS.

Beispiele

feFuncB erzeugen und Blaukanal abschwächen (Warmfilter)

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

const transfer = document.createElementNS(SVG_NS, 'feComponentTransfer');
const funcB = document.createElementNS(SVG_NS, 'feFuncB');
funcB.setAttribute('type', 'linear');
funcB.setAttribute('slope', '0.6'); // Blau auf 60 % reduzieren

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

// Filter per CSS auf ein Bild anwenden
document.querySelector('img')?.style.setProperty('filter', 'url(#warm)');

console.log(funcB instanceof SVGFEFuncBElement);
console.log(funcB.slope.baseVal);

true 0.6

Blauanteil per Schieberegler live ändern

// HTML: <input type="range" id="blue" min="0" max="2" step="0.05" value="1">
// sowie ein <feFuncB id="fb" type="linear" slope="1"> im Filter
const funcB = document.getElementById('fb');
const slider = document.getElementById('blue');

slider.addEventListener('input', () => {
  // animierte Eigenschaft direkt setzen
  funcB.slope.baseVal = Number(slider.value);
  console.log(`Blau-Steigung: ${funcB.slope.baseVal}`);
});

Blau-Steigung: 1.35

Typ und Tabellenwerte auslesen (Posterisierung)

// <feFuncB id="fb" type="discrete" tableValues="0 0.5 1"/>
const funcB = document.getElementById('fb');

const typeNames = ['unknown', 'identity', 'table', 'discrete', 'linear', 'gamma'];
console.log(typeNames[funcB.type.baseVal]);

const list = funcB.tableValues.baseVal;
const values = Array.from({ length: list.numberOfItems }, (_, i) => list.getItem(i).value);
console.log(values);

discrete [0, 0.5, 1]

// Wichtig · Fallstricke

<feFuncB> wirkt nur als direktes Kind von <feComponentTransfer>. Kommen mehrere <feFuncB>-Elemente vor, gilt das letzte.
Standardmäßig rechnen Filter im Farbraum linearRGB (color-interpolation-filters). Soll das Ergebnis den sRGB-Werten entsprechen, die du erwartest, setze color-interpolation-filters="sRGB" am Filter.
Die Eigenschaften sind animierbare Objekte und keine einfachen Zahlen. Schreibe also funcB.slope.baseVal = 0.5, nicht funcB.slope = 0.5. Die zweite Zuweisung wird stillschweigend ignoriert.
Elemente immer mit createElementNS und dem SVG-Namensraum erzeugen.
Die Schnittstelle wird von allen modernen Browsern unterstützt. Aufwendige Filterketten auf großen oder animierten Flächen können jedoch viel Leistung kosten. Wenn es reicht, nimm stattdessen einfache CSS-Filterfunktionen wie sepia() oder hue-rotate().

Siehe auch

SVGFEFuncAElement SVGFEFuncGElement SVGFEFuncRElement SVGFEFloodElement SVGDefsElement