SVGFEImageElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEImageElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEImageElement spiegelt das Attribut height des Elements <feImage> wider. Sie legt die vertikale Ausdehnung des Teilbereichs des Filterprimitivs (Filter Primitive Subregion) fest, also den Bereich, in den das Bild gerendert und innerhalb dessen das Ergebnis des Primitivs gültig ist.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über height.baseVal (ein SVGLength) ändern. height.animVal enthält den aktuell animierten Wert, etwa während einer SMIL-Animation.

Ist das Attribut nicht gesetzt, gilt der Standardwert 100%, bezogen auf die Filterregion. Wie Prozentwerte bzw. Zahlen interpretiert werden, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

Höhe eines feImage-Primitivs auslesen

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="bild" primitiveUnits="userSpaceOnUse">
    <feImage id="img" href="logo.png" x="10" y="10" width="120" height="80" />
  </filter>
  <rect width="200" height="200" filter="url(#bild)" />
</svg>`;
document.body.insertAdjacentHTML('beforeend', svg);

const feImage = document.getElementById('img');
console.log(feImage.height.baseVal.value);
console.log(feImage.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

80 true

Höhe per Skript ändern

const feImage = document.querySelector('feImage');

// Direkt als Zahl in Benutzereinheiten
feImage.height.baseVal.value = 150;
console.log(feImage.getAttribute('height'));

// Als Prozentwert setzen
feImage.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(feImage.getAttribute('height'));

150 50%

Standardwert erkennen, wenn kein Attribut gesetzt ist

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

console.log(feImage.hasAttribute('height'));
const h = feImage.height.baseVal;
console.log(h.valueAsString);

false 100%

// Wichtig · Fallstricke

Nicht direkt zuweisbar: feImage.height = 100 bewirkt nichts (bzw. wirft im Strict-Modus einen TypeError). Ändere stattdessen height.baseVal.value oder nutze setAttribute('height', …).
animVal ist schreibgeschützt; Schreibzugriffe darauf lösen eine Ausnahme aus.
Die Höhe beschreibt den Teilbereich des Primitivs, nicht die Größe des Bildes. Wie das Bild darin skaliert wird, steuert preserveAspectRatio.
Bei primitiveUnits="objectBoundingBox" werden Zahlen als Bruchteile des Begrenzungsrahmens gedeutet (z. B. 0.5 = 50 %). Das führt oft zu unerwartet kleinen Bereichen.
Negative Werte sind ein Fehler, der Wert 0 deaktiviert die Wirkung des Primitivs.
Wird in allen modernen Browsern unterstützt. Bei externen Bildern in href gelten CORS-Einschränkungen: Fremde Ressourcen können den Canvas-Export „verunreinigen“ (tainted).

Siehe auch

SVGFEImageElement SVGFEImageElement.width SVGFEImageElement.x SVGFEImageElement.y SVGAnimatedLength SVGLength HTMLSourceElement.height