SVGFEFuncRElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEFuncRElement extends SVGComponentTransferFunctionElement

Beschreibung

SVGFEFuncRElement steht im DOM für ein <feFuncR>-Element. Es ist immer ein Kindelement von <feComponentTransfer> und legt fest, wie jeder Wert im Rotkanal eines Eingabebildes umgerechnet wird. Für die anderen Kanäle gibt es die Gegenstücke SVGFEFuncGElement (Grün), SVGFEFuncBElement (Blau) und SVGFEFuncAElement (Alpha).

Eigene Eigenschaften oder Methoden hat die Schnittstelle nicht. Alles Nützliche erbt sie von SVGComponentTransferFunctionElement:

type (SVGAnimatedEnumeration): die Art der Funktion, also identity, table, discrete, linear oder gamma
tableValues (SVGAnimatedNumberList): die Stützwerte für table und discrete
slope, intercept (SVGAnimatedNumber): Steigung und Achsenabschnitt für linear
amplitude, exponent, offset (SVGAnimatedNumber): die Parameter für gamma

Außerdem stehen die Konstanten SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN (0), _IDENTITY (1), _TABLE (2), _DISCRETE (3), _LINEAR (4) und _GAMMA (5) zur Verfügung. Typische Einsatzgebiete sind Farbkorrekturen, Posterisierung, Negativ-Effekte und Helligkeits- oder Kontrastregler, die man per JavaScript live steuert. Dazu schreibt man in baseVal der animierbaren Eigenschaften oder setzt die Attribute direkt.

Rückgabewert

Typ

SVGFEFuncRElement

Beschreibung

Instanzen entstehen über document.createElementNS("http://www.w3.org/2000/svg", "feFuncR") oder beim Parsen von SVG-Markup. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Filter mit invertiertem Rotkanal per JavaScript erzeugen

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

const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'rot-invertiert';

const transfer = document.createElementNS(svgNS, 'feComponentTransfer');
const funcR = document.createElementNS(svgNS, 'feFuncR');
funcR.setAttribute('type', 'table');
funcR.setAttribute('tableValues', '1 0'); // 0 → 1, 1 → 0

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

// Filter auf ein beliebiges HTML-Element anwenden
document.querySelector('img')?.style.setProperty('filter', 'url(#rot-invertiert)');

console.log(funcR instanceof SVGFEFuncRElement);
console.log(funcR.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_TABLE);

true true

Rotanteil über einen Schieberegler live verstärken

// HTML: <input type="range" id="rot" min="0" max="3" step="0.1" value="1">
// SVG:  <feFuncR id="funcR" type="linear" slope="1" intercept="0"/>
const funcR = document.getElementById('funcR');
const regler = document.getElementById('rot');

regler.addEventListener('input', () => {
  // Direkt in das animierbare Zahlenattribut schreiben
  funcR.slope.baseVal = Number(regler.value);
  console.log(`Steigung Rot: ${funcR.slope.baseVal}`);
});

Steigung Rot: 1.5

Typ und tableValues auslesen

const funcR = document.querySelector('feFuncR');
const typNamen = ['unknown', 'identity', 'table', 'discrete', 'linear', 'gamma'];

console.log('Typ:', typNamen[funcR.type.baseVal]);

const liste = funcR.tableValues.baseVal; // SVGNumberList
const werte = [];
for (let i = 0; i < liste.numberOfItems; i++) {
  werte.push(liste.getItem(i).value);
}
console.log('Stützwerte:', werte);

Typ: discrete Stützwerte: [0, 0.5, 1]

Gamma-Korrektur nur für den Rotkanal

const funcR = document.querySelector('#warm feFuncR');
funcR.setAttribute('type', 'gamma');
funcR.amplitude.baseVal = 1;
funcR.exponent.baseVal = 0.6; // < 1 hellt die Rottöne auf
funcR.offset.baseVal = 0;

console.log(funcR.getAttribute('exponent'));

0.6

Siehe auch

SVGFEFuncAElement SVGFEFuncBElement SVGFEFuncGElement SVGFEFloodElement SVGDefsElement