Signatur
Beschreibung
Die Eigenschaft tableValues gehört zur Schnittstelle SVGComponentTransferFunctionElement. Diese Schnittstelle ist die gemeinsame Basis der Filter-Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> innerhalb von <feComponentTransfer>. Die Eigenschaft spiegelt das SVG-Attribut tableValues wider und gibt ein SVGAnimatedNumberList-Objekt zurück.
Die Zahlenliste wird nur ausgewertet, wenn das Attribut type den Wert "table" oder "discrete" hat. Bei table wird jeder Farbkanalwert (0–1) linear zwischen den Stützwerten interpoliert. Bei discrete entsteht eine Stufenfunktion. Damit lassen sich zum Beispiel Posterisierung, Farbinvertierung, Duotone-Effekte oder Kontrastkurven umsetzen.
Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Über tableValues.baseVal erhält man aber eine veränderbare SVGNumberList. Mit Methoden wie clear(), appendItem(), replaceItem() oder removeItem() lassen sich die Werte zur Laufzeit ändern. tableValues.animVal liefert den aktuell animierten Wert, der nur gelesen werden kann.
Rückgabewert
baseVal (veränderbare SVGNumberList mit den Werten aus dem Attribut) und animVal (nur lesbare SVGNumberList mit dem aktuellen, ggf. animierten Wert). Fehlt das Attribut, sind beide Listen leer.Beispiele
Tabellenwerte eines feFuncR auslesen
// HTML:
// <svg id="bild" width="0" height="0">
// <filter id="invert">
// <feComponentTransfer>
// <feFuncR id="rot" type="table" tableValues="1 0.5 0"/>
// </feComponentTransfer>
// </filter>
// </svg>
const funcR = document.getElementById('rot');
const liste = funcR.tableValues.baseVal;
const werte = [];
for (let i = 0; i < liste.numberOfItems; i++) {
werte.push(liste.getItem(i).value);
}
console.log(funcR.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_TABLE);
console.log(werte);Posterisierung zur Laufzeit ändern (baseVal bearbeiten)
const svg = document.getElementById('bild');
const kanaele = svg.querySelectorAll('feFuncR, feFuncG, feFuncB');
// Erzeugt n gleichmäßig verteilte Stufen zwischen 0 und 1
const setzeStufen = (n) => {
kanaele.forEach((func) => {
func.setAttribute('type', 'discrete');
const liste = func.tableValues.baseVal;
liste.clear();
for (let i = 0; i < n; i++) {
const zahl = svg.createSVGNumber();
zahl.value = n === 1 ? 0 : i / (n - 1);
liste.appendItem(zahl);
}
});
};
setzeStufen(4);
console.log(kanaele[0].getAttribute('tableValues'));Einfachere Alternative: Attribut per setAttribute setzen
const slider = document.querySelector('#kontrast');
const funcs = document.querySelectorAll('#kontrastFilter feFuncR, #kontrastFilter feFuncG, #kontrastFilter feFuncB');
slider.addEventListener('input', () => {
const k = Number(slider.value); // 0 … 0.5
const werte = `${k} ${1 - k}`;
funcs.forEach((f) => f.setAttribute('tableValues', werte));
// Die Eigenschaft spiegelt die Änderung sofort wider
console.log(funcs[0].tableValues.baseVal.numberOfItems);
});// Wichtig · Fallstricke
- Nur lesbar:
el.tableValues = …ist wirkungslos (im Strict Mode kommt einTypeError). Ändern Sie stattdessentableValues.baseValoder nutzen SiesetAttribute('tableValues', …). - Nur bei passendem
type: Die Werte wirken nur beitype="table"odertype="discrete". Beilinear,gammaoderidentitywerden sie ignoriert. - Leere Liste: Ist
tableValuesleer oder fehlt es, verhält sich die Funktion wieidentity. Der Kanal bleibt also unverändert. - Neue Listeneinträge müssen
SVGNumber-Objekte sein. Diese erzeugen Sie mitsvgElement.createSVGNumber(). Einfache Zahlen werden mit einemTypeErrorabgelehnt. - Die Filter rechnen standardmäßig im Farbraum
linearRGB(color-interpolation-filters). Soll die Tabelle direkt auf sRGB-Werte wirken, setzen Siecolor-interpolation-filters="sRGB". - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.