SVGFEFuncGElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEFuncGElement extends SVGComponentTransferFunctionElement

Beschreibung

SVGFEFuncGElement ist die DOM-Schnittstelle zum SVG-Element <feFuncG>. Das Element steht als Kind in einem <feComponentTransfer>-Filterprimitiv und legt fest, wie der Grünkanal jedes Pixels umgerechnet wird. Zusammen mit <feFuncR>, <feFuncB> und <feFuncA> lassen sich damit Helligkeit, Kontrast, Gamma-Korrektur, Posterisierung oder Farbstiche kanalweise einstellen.

Eigene Eigenschaften oder Methoden hat die Schnittstelle nicht. Sie erbt alles von SVGComponentTransferFunctionElement: type, tableValues, slope, intercept, amplitude, exponent und offset. Das sind animierbare Objekte (SVGAnimatedEnumeration, SVGAnimatedNumber, SVGAnimatedNumberList). Gelesen wird über .baseVal bzw. .animVal. Außerdem gibt es die Konstanten SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY (1), _TABLE (2), _DISCRETE (3), _LINEAR (4) und _GAMMA (5).

In der Praxis greift man per Skript auf das Element zu, um Filterparameter dynamisch zu ändern, etwa mit einem Schieberegler für die Grünintensität. Neue Elemente legt man immer mit document.createElementNS('http://www.w3.org/2000/svg', 'feFuncG') an. Mit createElement entstünde kein SVG-Element.

Rückgabewert

Typ

SVGFEFuncGElement

Beschreibung

Instanzen bekommt man über DOM-Abfragen wie querySelector('feFuncG') oder über document.createElementNS(). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

feFuncG-Element per Skript erzeugen und in einen Filter einfügen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

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

const transfer = document.createElementNS(SVG_NS, 'feComponentTransfer');
const funcG = document.createElementNS(SVG_NS, 'feFuncG');
funcG.setAttribute('type', 'linear');
funcG.setAttribute('slope', '1.5');
funcG.setAttribute('intercept', '0');

transfer.append(funcG);
filter.append(transfer);
svg.querySelector('defs').append(filter);

document.querySelector('#foto').setAttribute('filter', 'url(#mehrGruen)');
console.log(funcG instanceof SVGFEFuncGElement);

true

Grünkanal mit einem Schieberegler steuern

// HTML: <input type="range" id="gruen" min="0" max="2" step="0.1" value="1">
const funcG = document.querySelector('#mehrGruen feFuncG');
const regler = document.querySelector('#gruen');

regler.addEventListener('input', () => {
  // slope ist ein SVGAnimatedNumber – geschrieben wird baseVal
  funcG.slope.baseVal = Number(regler.value);
  console.log('Grün-Steigung:', funcG.slope.baseVal);
});

Grün-Steigung: 1.3

Übertragungstyp auslesen und auf table umstellen

const funcG = document.querySelector('feFuncG');

const typNamen = {
  1: 'identity', 2: 'table', 3: 'discrete', 4: 'linear', 5: 'gamma'
};
console.log('Aktueller Typ:', typNamen[funcG.type.baseVal]);

// Grünkanal invertieren
funcG.setAttribute('type', 'table');
funcG.setAttribute('tableValues', '1 0');

console.log(funcG.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_TABLE);
console.log(funcG.tableValues.baseVal.numberOfItems);

Aktueller Typ: linear true 2

// Wichtig · Fallstricke

Namensraum: Mit document.createElement('feFuncG') entsteht nur ein unbekanntes HTML-Element ohne Wirkung. Nimm immer createElementNS mit dem SVG-Namensraum.
Animierte Werte: Eigenschaften wie slope sind keine Zahlen, sondern SVGAnimatedNumber-Objekte. funcG.slope = 2 bewirkt nichts. Richtig ist funcG.slope.baseVal = 2 oder setAttribute('slope', '2'). animVal kann nur gelesen werden.
Farbraum: Filter rechnen standardmäßig in linearRGB (color-interpolation-filters). Wer Werte im sRGB-Raum erwartet, setzt am Filter color-interpolation-filters="sRGB".
Mehrfache Kinder: Gibt es mehrere <feFuncG> im selben <feComponentTransfer>, gilt nur das letzte.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Komplexe Filterketten können beim Rendern viel Leistung kosten, vor allem bei großen oder animierten Flächen.

Siehe auch

SVGFEFuncAElement SVGFEFuncBElement SVGFEFuncRElement SVGFEFloodElement SVGDefsElement