</> programmierung.net
Start · Sprachen · JavaScript · Referenz · SVGFECompositeElement.height

SVGFECompositeElement.height

Eigenschaft

Liefert das <code>height</code>-Attribut eines <code>&lt;feComposite&gt;</code>-Elements als schreibgeschütztes <code>SVGAnimatedLength</code>. Es legt die Höhe des Filterbereichs dieser Primitive fest.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

SVGFECompositeElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFECompositeElement gibt das height-Attribut eines <feComposite>-Elements zurück. Zusammen mit x, y und width bestimmt es den Teilbereich der Filterprimitive (filter primitive subregion). Das ist das Rechteck, in dem das Ergebnis des Compositings berechnet und abgeschnitten wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt mit zwei Teilen:

  • baseVal ist der statische Wert aus dem Attribut. Er lässt sich lesen und ändern.
  • animVal ist der aktuell animierte Wert, etwa während einer SMIL-Animation. Er ist nur lesbar.

Beide Werte sind SVGLength-Objekte. Sie bieten unter anderem value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Ist kein height-Attribut gesetzt, gilt als Standard 100% des Filterbereichs. Wie Prozentangaben aufgelöst werden, hängt von primitiveUnits am übergeordneten <filter> ab (userSpaceOnUse oder objectBoundingBox). Sinnvoll ist die Eigenschaft vor allem, wenn du den Wirkungsbereich eines Composite-Filters per Skript auslesen oder dynamisch anpassen willst, etwa für Reveal-Effekte oder interaktive Masken.

Rückgabewert

Typ
SVGAnimatedLength
Beschreibung
Ein nur lesbares SVGAnimatedLength-Objekt. Über baseVal änderst du den Attributwert, animVal liefert den animierten Wert.

Beispiele

Höhe einer feComposite-Primitive auslesen

// SVG-Markup:
// <svg width="200" height="200">
//   <filter id="f" primitiveUnits="userSpaceOnUse">
//     <feFlood flood-color="tomato" result="flood"/>
//     <feComposite id="comp" in="flood" in2="SourceGraphic"
//                  operator="in" x="0" y="0" width="200" height="120"/>
//   </filter>
//   <circle cx="100" cy="100" r="80" filter="url(#f)"/>
// </svg>

const comp = document.getElementById('comp');
const { baseVal } = comp.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 ändern (Reveal-Effekt per Slider)

const comp = document.getElementById('comp');
const slider = document.querySelector('#revealSlider'); // <input type="range" min="0" max="200">

slider.addEventListener('input', () => {
  // baseVal.value ändern schreibt das height-Attribut neu
  comp.height.baseVal.value = Number(slider.value);
  console.log(comp.getAttribute('height'));
});
z. B. "150" nach Verschieben des Sliders

Prozentwert setzen und Einheit umrechnen

const comp = document.querySelector('feComposite');
const h = comp.height.baseVal;

// Wert explizit in Prozent setzen
h.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(h.valueAsString);

// Standardwert prüfen, wenn kein Attribut gesetzt ist
const fresh = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
console.log(fresh.hasAttribute('height'), fresh.height.baseVal.valueAsString);
"50%" false "100%"

// Wichtig · Fallstricke

  • Nur lesbare Referenz: comp.height = 100 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändere stattdessen comp.height.baseVal.value oder nutze setAttribute('height', …).
  • animVal ist schreibgeschützt: Ein Schreibzugriff auf animVal löst eine NoModificationAllowedError-Ausnahme aus.
  • Prozentwerte und value: Bei Prozentangaben hängt baseVal.value vom Bezugssystem ab (primitiveUnits, Viewport). In manchen Browsern kann der Wert 0 oder ungenau sein, solange das Element nicht gerendert im Dokument hängt.
  • Negative Werte oder 0: Eine Höhe von 0 deaktiviert den Effekt der Primitive, ein negativer Wert ist ein Fehler. In beiden Fällen wird das Filterergebnis leer oder transparent.
  • Performance: Wird die Höhe häufig geändert, etwa in requestAnimationFrame, berechnet der Browser den gesamten Filter neu. Das kann bei großen Flächen teuer werden.
  • Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und steht identisch auf allen SVGFE*Element-Schnittstellen zur Verfügung.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.width SVGFECompositeElement.x SVGFECompositeElement.y SVGFECompositeElement.operator SVGAnimatedLength SVGLength
← Vorheriger Eintrag SVGFECompositeElement