SVGFEColorMatrixElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEColorMatrixElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEColorMatrixElement gibt die horizontale Ausdehnung des Filterprimitiv-Teilbereichs zurück. Das ist der Bereich, auf den das <feColorMatrix>-Primitiv innerhalb des Filters wirkt. Die Eigenschaft spiegelt das SVG-Attribut width wider und stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes, das auch x, y, height und result bereitstellt.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt mit zwei Teilen: baseVal enthält den im Markup oder per Skript gesetzten Grundwert, animVal den aktuellen Wert, während eine SMIL-Animation läuft. Beide sind SVGLength-Objekte mit value, valueInSpecifiedUnits, unitType und valueAsString.

Die Eigenschaft selbst ist schreibgeschützt. Du kannst ihr also kein neues Objekt zuweisen. Den Wert änderst du über width.baseVal.value, width.baseVal.newValueSpecifiedUnits() oder direkt über setAttribute('width', …). Wenn kein width-Attribut gesetzt ist, gilt standardmäßig 100% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength), das die Breite des Filterprimitiv-Teilbereichs beschreibt.

Beispiele

Breite eines feColorMatrix-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="grau">
    <feColorMatrix type="saturate" values="0" x="0" y="0" width="150" height="100"/>
  </filter>`;
document.body.append(svg);

const matrix = svg.querySelector('feColorMatrix');
console.log(matrix.width.baseVal.value);
console.log(matrix.width.baseVal.valueAsString);

150 150

Breite per Skript ändern

const matrix = document.querySelector('feColorMatrix');

// Pixelwert direkt setzen
matrix.width.baseVal.value = 200;
console.log(matrix.getAttribute('width'));

// Prozentwert über die Einheiten-API setzen
matrix.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(matrix.getAttribute('width'));

200 50%

Filter nur auf die linke Bildhälfte anwenden

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'halbgrau';
filter.setAttribute('primitiveUnits', 'objectBoundingBox');

const matrix = document.createElementNS(svgNS, 'feColorMatrix');
matrix.setAttribute('type', 'saturate');
matrix.setAttribute('values', '0');
matrix.setAttribute('x', '0');
matrix.setAttribute('width', '0.5'); // 50 % der Bounding Box

filter.append(matrix);
svg.append(filter);
document.querySelector('image').setAttribute('filter', 'url(#halbgrau)');

console.log(matrix.width.baseVal.valueInSpecifiedUnits);

0.5

Zuweisung an die Eigenschaft selbst schlägt fehl

const matrix = document.querySelector('feColorMatrix');
const vorher = matrix.width;
matrix.width = 300; // wird ignoriert (im Strict Mode: TypeError)
console.log(matrix.width === vorher, matrix.width instanceof SVGAnimatedLength);

true true

// Wichtig · Fallstricke

Schreibgeschützt: matrix.width = … wird ignoriert bzw. löst im Strict Mode einen TypeError aus. Ändere stattdessen width.baseVal.
Einheiten hängen von primitiveUnits ab: Beim Standardwert userSpaceOnUse steht ein Zahlenwert für Benutzereinheiten. Bei objectBoundingBox ist er ein Bruchteil der Bounding Box (z. B. 0.5).
Standardwert: Ohne Attribut gilt 100%. baseVal.value liefert dann den aufgelösten Wert, und der hängt vom Kontext ab.
Negative Werte sind ein Fehler, und 0 schaltet das Primitiv aus: Das Filterergebnis ist dann transparent.
animVal weicht nur bei laufenden SMIL-Animationen (<animate>) von baseVal ab. CSS-Animationen beeinflussen es nicht.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFEColorMatrixElement SVGFEColorMatrixElement.height SVGFEColorMatrixElement.x SVGFEColorMatrixElement.y SVGAnimatedLength SVGLength PerformanceScriptTiming.window