SVGFEColorMatrixElement.values — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEColorMatrixElement.values

Beschreibung

Die Eigenschaft values der Schnittstelle SVGFEColorMatrixElement spiegelt das Attribut values des SVG-Filterprimitivs <feColorMatrix> wider. Sie gibt ein SVGAnimatedNumberList-Objekt zurück, das über baseVal den im Markup gesetzten Grundwert und über animVal den aktuell animierten Wert bereitstellt.

Wie die Zahlenliste zu deuten ist, hängt vom Attribut type ab:

matrix: 20 Zahlen – eine 4×5-Matrix (Zeilen R, G, B, A; Spalten R, G, B, A, Versatz).
saturate: eine Zahl zwischen 0 und 1 (Sättigung).
hueRotate: eine Zahl in Grad (Farbtondrehung).
luminanceToAlpha: keine Werte, das Attribut wird ignoriert.

Die Eigenschaft selbst ist schreibgeschützt – Sie können ihr kein neues Objekt zuweisen. Die enthaltene Liste baseVal lässt sich aber über Methoden wie clear(), appendItem() oder replaceItem() verändern. Für einfache Änderungen ist setAttribute("values", ...) oft bequemer.

Rückgabewert

Typ

SVGAnimatedNumberList

Beschreibung

Objekt mit baseVal (änderbare SVGNumberList) und animVal (schreibgeschützte, animierte SVGNumberList).

Beispiele

Werte einer Farbmatrix auslesen

// <svg><filter id="f"><feColorMatrix id="cm" type="saturate" values="0.3"/></filter></svg>
const cm = document.getElementById("cm");
const list = cm.values.baseVal;

const zahlen = Array.from({ length: list.numberOfItems }, (_, i) => list.getItem(i).value);
console.log(cm.type.baseVal === SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE, zahlen);

true [0.3]

Sättigung per Schieberegler steuern

// <input type="range" id="slider" min="0" max="1" step="0.01" value="1">
const cm = document.querySelector("#f feColorMatrix");
const slider = document.getElementById("slider");
const svg = cm.ownerSVGElement;

slider.addEventListener("input", () => {
  const liste = cm.values.baseVal;
  const zahl = svg.createSVGNumber();
  zahl.value = Number(slider.value);
  liste.clear();
  liste.appendItem(zahl);
  console.log(cm.getAttribute("values"));
});

z. B. 0.45

Graustufen-Matrix per Skript setzen

const cm = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
cm.setAttribute("type", "matrix");

const grau = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0,      0,      0,      1, 0
];
cm.setAttribute("values", grau.join(" "));

console.log(cm.values.baseVal.numberOfItems);

20

// Wichtig · Fallstricke

Schreibgeschützt: cm.values = ... hat keine Wirkung (im strikten Modus kommt ein TypeError). Ändern Sie stattdessen values.baseVal oder setzen Sie das Attribut.
animVal ist nur lesbar. Schreibzugriffe darauf werfen eine NoModificationAllowedError-DOMException.
Fehlt das Attribut, ist die Liste leer. Der Browser verwendet dann Standardwerte: Einheitsmatrix bei matrix, 1 bei saturate und 0 bei hueRotate.
Bei type="matrix" mit einer anderen Anzahl als 20 Werten ist der Filter ungültig. Das Element wird dann meist so behandelt, als hätte es keine Wirkung.
Häufige Filter-Updates, etwa bei jedem input-Event, können auf großen Flächen teuer sein. Bündeln Sie Änderungen bei Bedarf mit requestAnimationFrame.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Für einfache Effekte sind CSS-Filter wie filter: saturate() oft die schlankere Wahl.

Siehe auch

SVGFEColorMatrixElement SVGFEColorMatrixElement.type SVGAnimatedNumberList SVGNumberList SVGSVGElement.createSVGNumber() Element.setAttribute() HTMLTableSectionElement.vAlign