Signatur
Beschreibung
Die Eigenschaft slope gehört zur Schnittstelle SVGComponentTransferFunctionElement. Diese Schnittstelle ist die Basis der Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> innerhalb eines <feComponentTransfer>-Filters. Sie spiegelt das Attribut slope wider, also die Steigung der linearen Übertragungsfunktion.
Wirksam ist slope nur, wenn das Attribut type des Elements den Wert "linear" hat. Dann wird jeder Farbkanalwert C nach der Formel C' = slope * C + intercept umgerechnet. Mit einer Steigung größer als 1 steigt der Kontrast bzw. die Helligkeit des Kanals, mit Werten zwischen 0 und 1 wird er abgeschwächt. Der Standardwert ist 1.
Die Eigenschaft ist schreibgeschützt und liefert ein SVGAnimatedNumber-Objekt. Über baseVal liest oder setzt man den Attributwert, animVal enthält den aktuellen Wert, auch während einer SMIL-Animation. So lassen sich Helligkeit, Kontrast oder Transparenz eines Filters per Skript ändern, ohne mit setAttribute() Zeichenketten zusammenzusetzen.
Rückgabewert
baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number). Ist das Attribut nicht gesetzt, ist der Wert 1.Beispiele
Steigung eines feFuncR-Elements auslesen
// <svg><filter id="hell"><feComponentTransfer>
// <feFuncR id="rot" type="linear" slope="1.5" intercept="0"/>
// </feComponentTransfer></filter></svg>
const funcR = document.getElementById('rot');
console.log(funcR.slope instanceof SVGAnimatedNumber);
console.log(funcR.slope.baseVal);
console.log(funcR.slope.animVal);Helligkeit per Schieberegler steuern
// HTML: <input type="range" id="regler" min="0" max="3" step="0.1" value="1">
// Bild mit style="filter:url(#hell)" und drei feFunc-Elementen type="linear"
const regler = document.getElementById('regler');
const funcs = document.querySelectorAll('#hell feFuncR, #hell feFuncG, #hell feFuncB');
regler.addEventListener('input', () => {
const wert = Number(regler.value);
funcs.forEach((fn) => {
fn.slope.baseVal = wert; // aktualisiert das slope-Attribut
});
console.log(`Steigung: ${wert}`);
});Filter dynamisch erzeugen und Steigung setzen
const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
filter.id = 'transparenz';
const transfer = document.createElementNS(NS, 'feComponentTransfer');
const funcA = document.createElementNS(NS, 'feFuncA');
funcA.setAttribute('type', 'linear'); // ohne type="linear" wirkt slope nicht
console.log(funcA.slope.baseVal); // Standardwert
funcA.slope.baseVal = 0.5; // halbe Deckkraft
transfer.append(funcA);
filter.append(transfer);
document.querySelector('svg defs').append(filter);
console.log(funcA.getAttribute('slope'));// Wichtig · Fallstricke
- Nur bei
type="linear"wirksam: Beiidentity,table,discreteodergammawirdslopeignoriert, auch wenn der Wert gesetzt ist. - Keine direkte Zuweisung:
el.slope = 2hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Setzen Sie immerel.slope.baseVal. - Werte außerhalb von 0–1: Die berechneten Kanalwerte werden auf den Bereich 0 bis 1 begrenzt. Eine sehr große Steigung führt daher schnell zu übersättigten, „ausgebrannten“ Farben. Negative Werte kehren den Kanal um.
- Farbraum: Die Berechnung erfolgt standardmäßig im Farbraum
linearRGB(color-interpolation-filters). Die Ergebnisse weichen deshalb von CSS-Filtern wiebrightness()ab, außer man setztcolor-interpolation-filters="sRGB". - Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. Häufige Änderungen an Filtern können aber aufwendige Neuberechnungen auslösen, besonders bei großen Grafiken.