SVGFEImageElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEImageElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEImageElement entspricht dem width-Attribut eines <feImage>-Elements. Sie legt die horizontale Ausdehnung des Filter-Primitiv-Teilbereichs (filter primitive subregion) fest, also des Rechtecks, in das das Bild innerhalb des Filters gezeichnet wird bzw. auf das die Ausgabe dieses Primitivs begrenzt ist.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Über baseVal erreichst du den im Markup (oder per Skript) gesetzten Grundwert als SVGLength, über animVal den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Die Eigenschaft selbst ist schreibgeschützt; ändern lässt sich der Wert über width.baseVal.value, width.baseVal.newValueSpecifiedUnits() oder direkt per setAttribute('width', …).

Ist das Attribut nicht gesetzt, gilt der Standardwert 100% der Filterregion. Wie Prozent- und Zahlenwerte interpretiert werden, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (Grundwert, veränderbar) und animVal (animierter Wert, nur lesbar), jeweils als SVGLength.

Beispiele

Breite eines feImage-Primitivs auslesen

// Markup:
// <svg width="300" height="200">
//   <filter id="f" primitiveUnits="userSpaceOnUse">
//     <feImage id="img" href="logo.png" x="10" y="10" width="120" height="80" />
//   </filter>
//   <rect width="300" height="200" filter="url(#f)" />
// </svg>
const feImage = document.getElementById('img');

console.log(feImage.width instanceof SVGAnimatedLength);
console.log(feImage.width.baseVal.value);
console.log(feImage.width.animVal.value);

true 120 120

Breite per Skript ändern

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

// Zahlenwert in Benutzereinheiten setzen
feImage.width.baseVal.value = 200;
console.log(feImage.getAttribute('width'));

// Wert mit expliziter Einheit (Prozent) setzen
feImage.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);
console.log(feImage.getAttribute('width'));

200 50%

feImage dynamisch erzeugen und Breite prüfen

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

feImage.setAttribute('href', 'textur.png');
feImage.setAttribute('width', '64');
filter.append(feImage);
document.querySelector('svg defs').append(filter);

const { baseVal } = feImage.width;
console.log(baseVal.value, baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

64 true

// Wichtig · Fallstricke

Nicht direkt zuweisbar: feImage.width = 100 hat keine Wirkung (bzw. wirft im Strict Mode einen TypeError). Ändere stattdessen width.baseVal.value oder das Attribut.
Fehlendes Attribut: Ohne width-Attribut liefert baseVal in manchen Browsern den Wert 0 bzw. einen Prozentwert, obwohl effektiv 100% der Filterregion gilt. Prüfe bei Bedarf mit hasAttribute('width').
Einheiten: Bei Prozentangaben liefert baseVal.value einen umgerechneten Wert in Benutzereinheiten, der vom Kontext abhängt; den Rohwert erhältst du über valueInSpecifiedUnits.
primitiveUnits beachten: Bei primitiveUnits="objectBoundingBox" bedeutet width="0.5" die halbe Breite des gefilterten Elements.
Kompatibilität: In allen modernen Browsern unterstützt. Externe Bilder in <feImage> unterliegen Same-Origin-/CORS-Regeln; Verweise auf SVG-Fragmente (href="#id") werden von Firefox nicht unterstützt.

Siehe auch

SVGFEImageElement SVGFEImageElement.height SVGFEImageElement.x SVGFEImageElement.y SVGAnimatedLength SVGLength SVGFilterElement