SVGFEFuncAElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEFuncAElement extends SVGComponentTransferFunctionElement

Beschreibung

SVGFEFuncAElement ist die DOM-Schnittstelle für das Element <feFuncA>. Es steht immer als Kindelement eines <feComponentTransfer>-Filterprimitivs und legt fest, wie der Alphakanal (die Deckkraft) jedes Pixels umgerechnet wird. Damit lassen sich z. B. Transparenz verstärken, abschwächen, invertieren oder in harte Stufen zerlegen (Posterisierung der Deckkraft).

Die Schnittstelle definiert selbst keine eigenen Eigenschaften oder Methoden, sondern erbt alles von SVGComponentTransferFunctionElement. Dort stehen die animierbaren Attribute zur Verfügung: type, tableValues, slope, intercept, amplitude, exponent und offset. Jede davon ist ein SVGAnimated*-Objekt; den aktuellen Wert liest man über .baseVal bzw. .animVal.

Der Funktionstyp wird über type bestimmt: identity, table, discrete, linear oder gamma. Im Skript erscheint er als numerische Konstante (SVG_FECOMPONENTTRANSFER_TYPE_*). Für dynamische Änderungen ist es meist am einfachsten, das Attribut per setAttribute() zu setzen.

Typische Einsatzfälle: weiche Schatten „härter“ machen, Masken mit Schwellwert erzeugen, Goo-/Metaball-Effekte (zusammen mit feGaussianBlur) oder die Deckkraft einer Grafik per JavaScript animieren.

Parameter

Name	Typ	Default	Beschreibung
$type	SVGAnimatedEnumeration	identity	Geerbt. Art der Übertragungsfunktion: `identity` (1), `table` (2), `discrete` (3), `linear` (4), `gamma` (5).
$tableValues	SVGAnimatedNumberList	leere Liste	Geerbt. Stützwerte für `table` bzw. `discrete`.
$slope	SVGAnimatedNumber	1	Geerbt. Steigung bei `type="linear"`: `C' = slope * C + intercept`.
$intercept	SVGAnimatedNumber	0	Geerbt. Achsenabschnitt bei `linear`.
$amplitude	SVGAnimatedNumber	1	Geerbt. Amplitude bei `gamma`: `C' = amplitude * C^exponent + offset`.
$exponent	SVGAnimatedNumber	1	Geerbt. Exponent bei `gamma`.
$offset	SVGAnimatedNumber	0	Geerbt. Verschiebung bei `gamma`.

Rückgabewert

Typ

SVGFEFuncAElement

Beschreibung

Eine Instanz entsteht durch Parsen von <feFuncA> oder über document.createElementNS("http://www.w3.org/2000/svg", "feFuncA"); einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Element per Skript erzeugen und Deckkraft halbieren

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');

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

const transfer = document.createElementNS(SVG_NS, 'feComponentTransfer');
const funcA = document.createElementNS(SVG_NS, 'feFuncA');
funcA.setAttribute('type', 'linear');
funcA.setAttribute('slope', '0.5');

transfer.append(funcA);
filter.append(transfer);

const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('width', '200');
rect.setAttribute('height', '100');
rect.setAttribute('fill', 'crimson');
rect.setAttribute('filter', 'url(#halbTransparent)');

svg.append(filter, rect);
document.body.append(svg);

console.log(funcA instanceof SVGFEFuncAElement);
console.log(funcA.slope.baseVal);

true 0.5

Geerbte Eigenschaften auslesen

// <feFuncA id="alpha" type="table" tableValues="0 0.2 1"/> im Dokument
const funcA = document.getElementById('alpha');

const typ = funcA.type.baseVal;
console.log(typ === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_TABLE);

const werte = Array.from(funcA.tableValues.baseVal, (n) => n.value);
console.log(werte);

true [0, 0.2, 1]

Goo-Effekt: Alpha-Schwellwert per Schieberegler steuern

// HTML:
// <input type="range" id="schwelle" min="5" max="40" value="18">
// <svg><filter id="goo">
//   <feGaussianBlur stdDeviation="8"/>
//   <feComponentTransfer><feFuncA id="gooAlpha" type="linear" slope="18" intercept="-7"/></feComponentTransfer>
// </filter> ... </svg>
const funcA = document.getElementById('gooAlpha');
const regler = document.getElementById('schwelle');

regler.addEventListener('input', () => {
  const slope = Number(regler.value);
  funcA.setAttribute('slope', slope);
  funcA.setAttribute('intercept', -(slope / 2 - 2));
  console.log(`slope=${funcA.slope.baseVal}, intercept=${funcA.intercept.baseVal}`);
});

slope=18, intercept=-7 (je nach Reglerstellung)

// Wichtig · Fallstricke

Kein Konstruktor: new SVGFEFuncAElement() wirft einen TypeError. Immer createElementNS() mit dem SVG-Namespace verwenden – document.createElement('feFuncA') erzeugt nur ein wirkungsloses HTMLUnknownElement.
Nur im richtigen Elternelement wirksam: <feFuncA> wirkt nur als direktes Kind von <feComponentTransfer>. Bei mehreren feFuncA-Kindern gilt das letzte.
Vormultiplizierte Farben: Filter arbeiten mit nicht vormultiplizierten Farbwerten; Alphaänderungen beeinflussen die sichtbare Farbintensität daher anders als bei einfacher opacity.
Ergebniswerte werden auf den Bereich 0–1 begrenzt; extreme slope-Werte erzeugen harte Kanten (gewollt beim Goo-Effekt).
Performance: Filter werden pro Pixel berechnet; häufiges Ändern großer gefilterter Flächen (z. B. in requestAnimationFrame) kann teuer sein.
Kompatibilität: In allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt; auch als CSS-filter: url(#id) auf HTML-Elemente anwendbar.

Siehe auch

SVGFEFuncBElement SVGFEFuncGElement SVGFEFuncRElement SVGFEFloodElement SVGDefsElement