SVGFEColorMatrixElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEColorMatrixElement.height

Beschreibung

Die Eigenschaft height des Interfaces SVGFEColorMatrixElement steht für das height-Attribut eines <feColorMatrix>-Elements. Das Attribut legt die Höhe des Teilbereichs (Filter Primitive Subregion) fest, in dem das Filterprimitiv berechnet wird und wirkt. Zusammen mit x, y und width bildet es das Rechteck, auf das sich die Farbmatrix beschränkt.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt: Das Objekt kann nicht ersetzt werden. Über height.baseVal (ein SVGLength) lässt sich der Grundwert aber lesen und ändern, height.animVal liefert den aktuellen, ggf. durch SMIL-Animation veränderten Wert (nur lesbar).

Fehlt das Attribut, gilt standardmäßig 100% der Filterregion. Wie Prozentwerte und Zahlen interpretiert werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (aktueller, animierter Wert, nur lesbar).

Beispiele

Höhe eines feColorMatrix-Primitivs auslesen

// HTML: <svg><filter id="grau"><feColorMatrix id="cm" type="saturate" values="0" height="50%"/></filter></svg>
const cm = document.getElementById('cm');
const { baseVal } = cm.height;

console.log(baseVal.valueAsString);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

50% true

Filter nur auf die obere Hälfte anwenden (per Skript erzeugt)

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

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

const matrix = document.createElementNS(NS, 'feColorMatrix');
matrix.setAttribute('type', 'saturate');
matrix.setAttribute('values', '0');

// Höhe über das SVGLength-Objekt setzen: 0.5 = 50 % der Bounding Box
matrix.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 0.5);

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

console.log(matrix.getAttribute('height'));

0.5

Schreibschutz der Eigenschaft vs. änderbarer baseVal

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

// Zuweisung an height selbst hat keine Wirkung (im Strict Mode: TypeError)
try {
  'use strict';
  cm.height = 100;
} catch (e) {
  console.log('Nicht zuweisbar:', e.constructor.name);
}

// Korrekt: über baseVal ändern
cm.height.baseVal.value = 120;
console.log(cm.height.baseVal.value, cm.height.animVal.value);

120 120

// Wichtig · Fallstricke

Schreibgeschützt: height selbst kann nicht neu zugewiesen werden – Änderungen erfolgen über height.baseVal.value, newValueSpecifiedUnits() oder setAttribute('height', …).
Standardwert: Ohne Attribut liefert baseVal 100%; der Wert in Pixeln (baseVal.value) bei Prozentangaben ist kontextabhängig und nicht immer aussagekräftig.
Einheiten: Die Bedeutung hängt von primitiveUnits des <filter> ab. Bei objectBoundingBox sind Werte Bruchteile (z. B. 0.5), nicht Pixel.
Negative Werte sind ein Fehler, 0 deaktiviert das Primitiv (leeres Ergebnis).
Das Element muss mit createElementNS im SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht.
Kompatibilität: in allen modernen Browsern verfügbar; animVal unterscheidet sich nur bei SMIL-Animationen vom Grundwert.

Siehe auch

SVGFEColorMatrixElement SVGFEColorMatrixElement.width SVGFEColorMatrixElement.x SVGFEColorMatrixElement.y SVGAnimatedLength SVGLength