SVGFEDropShadowElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEDropShadowElement gehört zu den Filterprimitiv-Attributen (x, y, width, height, result). Sie legt die Breite des Teilbereichs (filter primitive subregion) fest, in dem das Ergebnis des Schlagschattens berechnet und abgeschnitten wird.

Die Eigenschaft selbst ist schreibgeschützt: Das zurückgegebene SVGAnimatedLength-Objekt lässt sich nicht ersetzen. Über width.baseVal kann man aber den Grundwert lesen und ändern (z. B. mit baseVal.value oder baseVal.newValueSpecifiedUnits()). width.animVal liefert den aktuell wirksamen Wert, etwa während einer SMIL-Animation.

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

Praktisch nützlich ist die Eigenschaft, wenn man den Schattenbereich per Skript begrenzen oder analysieren möchte – etwa um abgeschnittene Schatten zu vermeiden oder dynamisch anzupassen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

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

Beispiele

Breite des Filterprimitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="schatten">
    <feDropShadow id="ds" dx="4" dy="4" stdDeviation="3" width="150" />
  </filter>`;
document.body.append(svg);

const dropShadow = svg.querySelector('#ds');
console.log(dropShadow.width.baseVal.value);
console.log(dropShadow.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

150 true

Breite per Skript ändern

const dropShadow = document.querySelector('feDropShadow');

// Grundwert direkt als Zahl setzen (Benutzereinheiten)
dropShadow.width.baseVal.value = 200;
console.log(dropShadow.getAttribute('width'));

// Alternativ auf Prozent umstellen
dropShadow.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  120
);
console.log(dropShadow.getAttribute('width'));

200 120%

Standardwert und Schreibschutz prüfen

const svgNS = 'http://www.w3.org/2000/svg';
const ds = document.createElementNS(svgNS, 'feDropShadow');

// Ohne Attribut: 100 %
console.log(ds.width.baseVal.valueAsString);

// Die Eigenschaft selbst lässt sich nicht ersetzen
ds.width = 50; // wird ignoriert (im strict mode: TypeError)
console.log(ds.width instanceof SVGAnimatedLength);

100% true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an width selbst wirkt nicht (im Strict Mode TypeError). Änderungen immer über width.baseVal oder setAttribute('width', …) vornehmen.
Abgeschnittene Schatten: Die Teilregion wird zusätzlich durch die Filterregion des <filter>-Elements begrenzt (Standard: -10%/120%). Ein großer dx oder stdDeviation kann trotz passender width abgeschnitten werden – dann width am <filter> erhöhen.
Prozentwerte: baseVal.value liefert bei Prozentangaben einen in Benutzereinheiten umgerechneten Wert, der vom Kontext abhängt; für den Originalwert valueInSpecifiedUnits oder valueAsString verwenden.
Kompatibilität: <feDropShadow> wird von allen aktuellen Browsern unterstützt; der alte Internet Explorer und ältere Edge-Versionen (EdgeHTML) kennen das Element nicht.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.height SVGFEDropShadowElement.x SVGFEDropShadowElement.y SVGAnimatedLength SVGLength SVGFilterElement