SVGComponentTransferFunctionElement.intercept — Eigenschaft · JavaScript-Referenz

Signatur

SVGComponentTransferFunctionElement.intercept

Beschreibung

Die Eigenschaft intercept gehört zur Schnittstelle SVGComponentTransferFunctionElement, der Basisklasse der Filter-Primitiven <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> innerhalb von <feComponentTransfer>. Sie spiegelt das SVG-Attribut intercept wider und gibt ein SVGAnimatedNumber-Objekt zurück.

Das Attribut wirkt nur, wenn type="linear" gesetzt ist. Dann wird jeder Farbkanalwert C (Bereich 0–1) nach der Formel C' = slope * C + intercept umgerechnet. Mit intercept verschiebt man also den Kanal um einen festen Betrag, etwa um Bilder aufzuhellen, abzudunkeln oder einen Farbstich zu erzeugen. Der Standardwert ist 0.

Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen. Über intercept.baseVal lässt sich der Wert aber lesen und schreiben. intercept.animVal liefert den aktuell animierten Wert, zum Beispiel während einer SMIL-Animation mit <animate>.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Grundwert, beschreibbar, number) und animVal (aktuell animierter Wert, nur lesbar, number). Fehlt das Attribut, ist der Wert 0.

Beispiele

intercept-Wert auslesen

// <svg><filter id="hell"><feComponentTransfer>
//   <feFuncR id="funcR" type="linear" slope="1" intercept="0.2"/>
// </feComponentTransfer></filter></svg>
const funcR = document.getElementById('funcR');

console.log(funcR.intercept instanceof SVGAnimatedNumber);
console.log(funcR.intercept.baseVal);
console.log(funcR.intercept.animVal);

true 0.2 0.2

Helligkeit per Schieberegler anpassen

// Alle drei Farbkanäle gemeinsam verschieben
const funcs = document.querySelectorAll('#hell feFuncR, #hell feFuncG, #hell feFuncB');
const slider = document.querySelector('#helligkeit'); // <input type="range" min="-0.5" max="0.5" step="0.05">

slider.addEventListener('input', () => {
  const wert = Number(slider.value);
  funcs.forEach((f) => {
    f.intercept.baseVal = wert; // entspricht setAttribute('intercept', wert)
  });
});

Filter komplett per JavaScript erzeugen

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

const filter = document.createElementNS(NS, 'filter');
filter.id = 'rotstich';
const transfer = document.createElementNS(NS, 'feComponentTransfer');
const funcR = document.createElementNS(NS, 'feFuncR');
funcR.setAttribute('type', 'linear');
funcR.setAttribute('slope', '1');

console.log(funcR.intercept.baseVal); // Standardwert
funcR.intercept.baseVal = 0.3;
console.log(funcR.getAttribute('intercept'));

transfer.append(funcR);
filter.append(transfer);
svg.append(filter);
document.querySelector('img').style.filter = 'url(#rotstich)';

0 0.3

// Wichtig · Fallstricke

Nur bei type="linear" wirksam: Bei identity, table, discrete oder gamma wird intercept ignoriert. Für gamma gibt es stattdessen offset.
Keine direkte Zuweisung: el.intercept = 0.5 hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Richtig ist el.intercept.baseVal = 0.5.
Ergebnisse außerhalb von 0–1 werden vom Browser auf diesen Bereich begrenzt.
Farbberechnungen laufen standardmäßig im Farbraum linearRGB. Mit color-interpolation-filters="sRGB" verhalten sich die Werte oft so, wie man es aus Bildbearbeitungsprogrammen erwartet.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft nicht.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGComponentTransferFunctionElement SVGComponentTransferFunctionElement.slope SVGComponentTransferFunctionElement.type SVGComponentTransferFunctionElement.offset SVGAnimatedNumber SVGFEComponentTransferElement