SVGComponentTransferFunctionElement.type — Eigenschaft · JavaScript-Referenz

Signatur

SVGComponentTransferFunctionElement.type

Beschreibung

Die schreibgeschützte Eigenschaft type gehört zur Schnittstelle SVGComponentTransferFunctionElement. Diese Schnittstelle ist die gemeinsame Basis der Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA>. Die Elemente stehen als Kinder innerhalb von <feComponentTransfer> und legen fest, wie ein einzelner Farbkanal (Rot, Grün, Blau oder Alpha) umgerechnet wird.

Die Eigenschaft gibt kein Zeichenkette zurück, sondern ein SVGAnimatedEnumeration-Objekt. Über baseVal liest und setzt du den im Attribut hinterlegten Wert. animVal liefert den Wert, der gerade tatsächlich gilt, also inklusive laufender SMIL-Animationen, und lässt sich nur lesen. Beide enthalten eine Zahl, die einer dieser Konstanten entspricht:

SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN (0): unbekannter oder ungültiger Wert
SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY (1): identity, der Kanal bleibt unverändert
SVG_FECOMPONENTTRANSFER_TYPE_TABLE (2): table, lineare Interpolation zwischen den Werten aus tableValues
SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE (3): discrete, Stufenfunktion auf Grundlage von tableValues
SVG_FECOMPONENTTRANSFER_TYPE_LINEAR (4): linear, die Formel slope * C + intercept
SVG_FECOMPONENTTRANSFER_TYPE_GAMMA (5): gamma, die Formel amplitude * C^exponent + offset

Du brauchst diese Eigenschaft, wenn du Filter per Skript untersuchen oder ändern willst. Typische Fälle sind das Umschalten zwischen Helligkeits-, Kontrast- und Posterisierungseffekten oder Werkzeuge, die bestehende SVG-Filter auswerten.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (Zahl, les- und schreibbar) und animVal (Zahl, nur lesbar). Beide enthalten einen der Werte 0–5 der Konstanten SVG_FECOMPONENTTRANSFER_TYPE_*.

Beispiele

Übertragungsfunktion eines Kanals auslesen

// <svg><filter id="f"><feComponentTransfer>
//   <feFuncR type="linear" slope="1.5" intercept="0"/>
// </feComponentTransfer></filter></svg>
const funcR = document.querySelector('#f feFuncR');

const typNamen = ['unknown', 'identity', 'table', 'discrete', 'linear', 'gamma'];
const { baseVal, animVal } = funcR.type;

console.log(baseVal, typNamen[baseVal]);
console.log(animVal === baseVal);

4 linear true

Filter per Konstante auf Posterisierung umstellen

const funcs = document.querySelectorAll('#f feComponentTransfer > *');

for (const fn of funcs) {
  // baseVal setzen – das type-Attribut wird automatisch angepasst
  fn.type.baseVal = SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE;
  fn.tableValues.baseVal.clear();
  fn.setAttribute('tableValues', '0 0.33 0.66 1');
}

console.log(funcs[0].getAttribute('type'));

discrete

Filter komplett per Skript aufbauen und prüfen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'gamma-filter';
const transfer = document.createElementNS(NS, 'feComponentTransfer');

for (const kanal of ['feFuncR', 'feFuncG', 'feFuncB']) {
  const fn = document.createElementNS(NS, kanal);
  fn.setAttribute('type', 'gamma');
  fn.setAttribute('exponent', '0.6');
  transfer.append(fn);
}

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

const istGamma = [...transfer.children].every(
  (fn) => fn.type.baseVal === SVGComponentTransferFunctionElement.SVG_FECOMPONENTTRANSFER_TYPE_GAMMA
);
console.log(istGamma);

true

// Wichtig · Fallstricke

Schreibgeschützt heißt hier: Du kannst type selbst kein neues Objekt zuweisen. Eine Anweisung wie el.type = 'linear' hat keine Wirkung und wirft im Strict Mode einen Fehler. Ändern lässt sich der Wert nur über el.type.baseVal = 4 oder el.setAttribute('type', 'linear').
Zahl statt Zeichenkette: baseVal enthält eine Zahl. Wenn du einen Wert außerhalb von 1–5 zuweist (auch 0 bzw. UNKNOWN), wirft der Browser einen TypeError.
Fehlendes oder ungültiges Attribut: Laut Filter-Effects-Spezifikation verhält sich das Element wie identity, wenn type fehlt. Manche Browser melden über baseVal in diesem Fall jedoch 0 (UNKNOWN). Prüfe deshalb besser mit hasAttribute('type'), ob das Attribut vorhanden ist.
Namensraum: Die Elemente musst du mit document.createElementNS('http://www.w3.org/2000/svg', …) erzeugen. Mit createElement entstehen gewöhnliche Elemente ohne type-Schnittstelle.
Kompatibilität: Die Eigenschaft wird in allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) seit Langem unterstützt. animVal weicht nur bei aktiven SMIL-Animationen (<set>/<animate>) von baseVal ab.

Siehe auch

SVGComponentTransferFunctionElement.slope SVGComponentTransferFunctionElement.offset SVGComponentTransferFunctionElement.exponent SVGComponentTransferFunctionElement.amplitude SVGComponentTransferFunctionElement.intercept