Signatur
Beschreibung
Die Eigenschaft offset gehört zur Schnittstelle SVGComponentTransferFunctionElement. Diese Schnittstelle ist die Basis der Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> innerhalb eines <feComponentTransfer>-Filters. Sie gibt ein SVGAnimatedNumber-Objekt zurück, das dem Attribut offset entspricht.
Das Attribut offset wird nur ausgewertet, wenn die Transferfunktion den Typ type="linear" hat. Dann wird jeder Farbkanalwert C nach der Formel C' = slope * C + intercept umgerechnet. Hier gibt es eine Besonderheit: In der SVG-Spezifikation heißt der konstante Anteil intercept. offset gehört dagegen zum Typ type="gamma" mit der Formel C' = amplitude * Cexponent + offset. Sinnvoll ist offset also bei Gamma-Transferfunktionen.
Die Eigenschaft selbst ist schreibgeschützt, Sie können ihr also kein neues Objekt zuweisen. Den Wert können Sie aber über offset.baseVal lesen und ändern, und das wirkt sich sofort auf das gerenderte Ergebnis aus. offset.animVal liefert den aktuellen Wert während einer SMIL-Animation. Ist das Attribut nicht gesetzt, gilt der Standardwert 0.
Rückgabewert
baseVal (änderbarer Grundwert, number) und animVal (schreibgeschützter, aktuell animierter Wert). Standardwert: 0.Beispiele
Offset einer Gamma-Funktion auslesen
// HTML:
// <svg width="0" height="0">
// <filter id="aufhellen">
// <feComponentTransfer>
// <feFuncR id="funcR" type="gamma" amplitude="1" exponent="1" offset="0.2" />
// </feComponentTransfer>
// </filter>
// </svg>
const funcR = document.getElementById('funcR');
console.log(funcR instanceof SVGComponentTransferFunctionElement);
console.log(funcR.offset.baseVal);
console.log(funcR.offset.animVal);Helligkeit per Schieberegler steuern
// HTML:
// <input type="range" id="regler" min="-0.5" max="0.5" step="0.05" value="0">
// <svg width="0" height="0">
// <filter id="hell">
// <feComponentTransfer>
// <feFuncR type="gamma" offset="0" />
// <feFuncG type="gamma" offset="0" />
// <feFuncB type="gamma" offset="0" />
// </feComponentTransfer>
// </filter>
// </svg>
// <img src="foto.jpg" style="filter: url(#hell)">
const funktionen = document.querySelectorAll('#hell feFuncR, #hell feFuncG, #hell feFuncB');
const regler = document.getElementById('regler');
regler.addEventListener('input', () => {
const wert = Number(regler.value);
funktionen.forEach((fn) => {
fn.offset.baseVal = wert; // wirkt sofort auf das Rendering
});
console.log(`Offset: ${wert}`);
});Fehlendes Attribut und schreibgeschützte Eigenschaft
const ns = 'http://www.w3.org/2000/svg';
const funcA = document.createElementNS(ns, 'feFuncA');
funcA.setAttribute('type', 'gamma');
console.log(funcA.offset.baseVal); // Standardwert
funcA.offset.baseVal = 0.3;
console.log(funcA.getAttribute('offset')); // Attribut wird mitgeschrieben
funcA.offset = 5; // wird ignoriert (im Strict Mode: TypeError)
console.log(funcA.offset.baseVal);// Wichtig · Fallstricke
- Nur bei
type="gamma"wirksam: Beiidentity,table,discreteundlinearwirdoffsetignoriert. Fürlineargibt es stattdessenintercept. - Schreibgeschützt: Wenn Sie
el.offsetetwas zuweisen, passiert nichts. Im Strict Mode (z. B. in ES-Modulen) wird einTypeErrorausgelöst. Ändern Sie den Wert immer überoffset.baseVal. - Wertebereich: Die Farbkanäle arbeiten im Bereich 0–1. Ergebnisse außerhalb dieses Bereichs werden abgeschnitten, deshalb sind nur kleine Offsets (etwa -1 bis 1) sinnvoll.
- Farbraum: Filter rechnen standardmäßig in
linearRGB(color-interpolation-filters). Das wirkt sich auf die sichtbare Helligkeit aus. - Wird von allen modernen Browsern unterstützt. Ändern Sie den Wert häufig bei großen Bildern, kann das Neuberechnen des Filters spürbar Leistung kosten.