SVGFEFloodElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEFloodElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEFloodElement entspricht dem Attribut height des Elements <feFlood>. Sie legt die vertikale Ausdehnung des Teilbereichs (filter primitive subregion) fest, den das Filterprimitiv mit Farbe füllt.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Über baseVal lesen oder ändern Sie den im Markup gesetzten Grundwert. animVal liefert den aktuellen, eventuell durch SMIL-Animation veränderten Wert und ist nur lesbar. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Die Eigenschaft selbst ist schreibgeschützt: Sie können element.height keinen neuen Wert zuweisen. Die Höhe ändern Sie über height.baseVal.value, über newValueSpecifiedUnits() oder mit setAttribute("height", …). Ist kein Attribut gesetzt, gilt als Standardwert 100% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert) und animVal (aktueller animierter Wert, nur lesbar). Beide sind vom Typ SVGLength.

Beispiele

Höhe eines feFlood-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="flut">
    <feFlood id="flood" x="0" y="0" width="200" height="80" flood-color="tomato" />
  </filter>`;
document.body.append(svg);

const flood = document.getElementById('flood');
console.log(flood.height instanceof SVGAnimatedLength);
console.log(flood.height.baseVal.value);
console.log(flood.height.animVal.value);

true 80 80

Höhe per Script anpassen

const flood = document.querySelector('feFlood');

// Grundwert direkt in Benutzereinheiten setzen
flood.height.baseVal.value = 120;
console.log(flood.getAttribute('height'));

// Prozentwert mit expliziter Einheit setzen
flood.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(flood.getAttribute('height'));

120 50%

Einheit prüfen und Zuweisungsversuch

const flood = document.querySelector('feFlood');
flood.setAttribute('height', '25%');

const len = flood.height.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);

// Direkte Zuweisung wird ignoriert (im Strict Mode: TypeError)
try {
  'use strict';
  flood.height = 10;
} catch (e) {
  console.log(e.name);
}
console.log(flood.getAttribute('height'));

true 25 25%

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie flood.height = 100 hat keine Wirkung. In ES-Modulen und im Strict Mode löst sie einen TypeError aus. Ändern Sie stattdessen height.baseVal oder das Attribut.
Prozentwerte: Bei Prozentangaben liefert baseVal.value einen in Benutzereinheiten umgerechneten Wert, der vom Filterbereich und von primitiveUnits abhängt. Mit valueInSpecifiedUnits erhalten Sie den Wert in der angegebenen Einheit.
animVal ist nur lesbar: Ein Schreibversuch löst eine NoModificationAllowedError-DOMException aus.
Namensraum: Elemente, die mit document.createElement('feFlood') statt mit createElementNS erzeugt werden, sind keine SVGFEFloodElement-Instanzen und haben die Eigenschaft nicht.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Eine negative Höhe ist ein Fehler und deaktiviert das Filterprimitiv, bei 0 wird es nicht gerendert.

Siehe auch

SVGFEFloodElement SVGFEFloodElement.width SVGFEFloodElement.x SVGFEFloodElement.y SVGFEFloodElement.result SVGAnimatedLength SVGLength