SVGFEConvolveMatrixElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEConvolveMatrixElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEConvolveMatrixElement gibt die vertikale Ausdehnung des Filterprimitiv-Teilbereichs (filter primitive subregion) eines <feConvolveMatrix>-Elements zurück. Sie spiegelt das SVG-Attribut height wider und stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes, das auch x, y, width und result bereitstellt.

Zurückgegeben wird kein Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Darüber greifst du mit baseVal auf den im Markup bzw. per Skript gesetzten Grundwert zu und mit animVal auf den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Die Eigenschaft selbst ist schreibgeschützt – du kannst ihr kein neues Objekt zuweisen. Den Wert änderst du über height.baseVal.value, baseVal.newValueSpecifiedUnits() oder direkt per setAttribute("height", …). Sinnvoll ist das etwa, um den Wirkungsbereich einer Faltung (Schärfen, Weichzeichnen, Kantenerkennung) auf einen Bildausschnitt zu begrenzen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert) und animVal (aktueller animierter Wert), jeweils als SVGLength. Fehlt das Attribut, gilt standardmäßig 100% (bezogen auf den Filterbereich).

Beispiele

Höhe eines feConvolveMatrix-Primitivs auslesen

const svgNS = "http://www.w3.org/2000/svg";
const conv = document.createElementNS(svgNS, "feConvolveMatrix");
conv.setAttribute("kernelMatrix", "0 -1 0 -1 5 -1 0 -1 0");
conv.setAttribute("height", "120");

console.log(conv.height instanceof SVGAnimatedLength);
console.log(conv.height.baseVal.value);
console.log(conv.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

true 120 true

Schärfefilter nur auf die obere Bildhälfte anwenden

// HTML: <svg width="400" height="300"><filter id="sharpen" primitiveUnits="userSpaceOnUse">
//   <feConvolveMatrix id="conv" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/></filter>
//   <image href="foto.jpg" width="400" height="300" filter="url(#sharpen)"/></svg>
const conv = document.getElementById("conv");
conv.setAttribute("x", "0");
conv.setAttribute("y", "0");
conv.setAttribute("width", "400");

// Höhe über das SVGLength-Objekt setzen
conv.height.baseVal.value = 150;
console.log(conv.getAttribute("height"));

150

Höhe in Prozent setzen und Einheit prüfen

const conv = document.querySelector("feConvolveMatrix");
const h = conv.height.baseVal;

h.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(h.valueInSpecifiedUnits, h.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(conv.getAttribute("height"));

50 true 50%

// Wichtig · Fallstricke

Schreibgeschützt: conv.height = 100 hat keine Wirkung (im Strict-Modus TypeError). Ändere stattdessen height.baseVal oder das Attribut.
Kein Zahlenwert: conv.height ist ein Objekt – für Berechnungen immer .baseVal.value bzw. .animVal.value verwenden.
Einheiten: Die Bedeutung hängt vom Attribut primitiveUnits des umgebenden <filter> ab (userSpaceOnUse vs. objectBoundingBox). Bei Prozentwerten kann baseVal.value ohne gerendertes Dokument einen Fehler werfen oder 0 liefern.
Negative Werte sind ungültig, 0 deaktiviert die Wirkung des Primitivs.
animVal ist schreibgeschützt; in aktuellen Browsern entspricht er meist baseVal, sofern keine SMIL-Animation läuft.
Kompatibilität: In allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.

Siehe auch

SVGFEConvolveMatrixElement SVGFEConvolveMatrixElement.width SVGFEConvolveMatrixElement.x SVGFEConvolveMatrixElement.y SVGAnimatedLength SVGLength SVGFEConvolveMatrixElement.result