SVGFEOffsetElement.height — Eigenschaft · JavaScript-Referenz

Signatur

get SVGFEOffsetElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEOffsetElement entspricht dem Attribut height des SVG-Elements <feOffset>. Zusammen mit x, y und width legt sie den Teilbereich des Filterprimitivs (filter primitive subregion) fest. Nur innerhalb dieses Bereichs wird das verschobene Ergebnis berechnet und an nachfolgende Primitive weitergereicht.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Sie gibt aber ein SVGAnimatedLength zurück, dessen baseVal (ein SVGLength) veränderbar ist. Über baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits() lässt sich die Höhe also zur Laufzeit ändern. animVal enthält den aktuellen, ggf. durch SMIL-Animation veränderten Wert.

Fehlt das Attribut, gilt standardmäßig 100% – der Teilbereich erstreckt sich dann über die volle Höhe der Filterregion. Wie Prozentwerte und Zahlen interpretiert werden, bestimmt das Attribut primitiveUnits des umgebenden <filter>-Elements (userSpaceOnUse oder objectBoundingBox).

Praktisch nützlich ist height, wenn ein Versatzeffekt (z. B. ein Schlagschatten) nur auf einen Streifen begrenzt werden soll oder wenn man Filterparameter dynamisch per Skript steuern möchte.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert). Ohne Attribut entspricht der Wert 100%.

Beispiele

Höhe eines feOffset-Primitivs auslesen

// SVG im Dokument:
// <svg width="200" height="200">
//   <filter id="schatten" primitiveUnits="userSpaceOnUse">
//     <feOffset id="versatz" dx="5" dy="5" height="120" />
//   </filter>
// </svg>
const offset = document.getElementById('versatz');
const { baseVal } = offset.height;

console.log(baseVal.value);          // Wert in Benutzereinheiten
console.log(baseVal.valueAsString);  // Originalschreibweise
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

120 "120" true

Höhe dynamisch per Skript ändern

const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.setAttribute('id', 'versatzFilter');

const offset = document.createElementNS(SVG_NS, 'feOffset');
offset.setAttribute('dx', '4');
offset.setAttribute('dy', '4');
filter.append(offset);
document.querySelector('svg').append(filter);

// Nicht erlaubt: offset.height = ... (schreibgeschützt)
// Stattdessen den Grundwert anpassen:
offset.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

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

"50%"

Standardwert ohne height-Attribut prüfen

const offset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');

console.log(offset.hasAttribute('height'));
console.log(offset.height instanceof SVGAnimatedLength);
console.log(offset.height.baseVal.valueAsString);

false true "100%"

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.height = 100 wird ignoriert (im strikten Modus TypeError). Ändern Sie stattdessen el.height.baseVal.value oder das Attribut per setAttribute('height', …).
Einheiten: Bei Prozentangaben liefert baseVal.value je nach Kontext einen umgerechneten Wert; für die Originalschreibweise valueAsString nutzen. Die Deutung hängt von primitiveUnits des <filter> ab.
Negative Werte oder 0 deaktivieren das Filterprimitiv praktisch – das Ergebnis ist leer bzw. transparent.
Die Höhe bezieht sich auf den Teilbereich des Primitivs, nicht auf die Filterregion selbst; diese wird über SVGFilterElement.height gesteuert und begrenzt den Teilbereich zusätzlich.
Kompatibilität: In allen modernen Browsern (Chrome, Edge, Firefox, Safari) seit langem unterstützt; der Zugriff aus Node.js ist nur mit einer DOM-Implementierung möglich, die SVG-Filter abbildet (jsdom unterstützt SVGFEOffsetElement nicht vollständig).

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.width SVGFEOffsetElement.x SVGFEOffsetElement.y SVGFEOffsetElement.dx SVGAnimatedLength SVGLength SVGFilterElement