SVGFEMorphologyElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEMorphologyElement gibt das Attribut width eines <feMorphology>-Elements als SVGAnimatedLength-Objekt zurück. Dieses Attribut legt die horizontale Ausdehnung des Filterprimitiven-Teilbereichs fest, also die Fläche, in der das Ergebnis der Morphologie-Operation (erode oder dilate) berechnet und abgeschnitten wird.

Die Eigenschaft selbst ist schreibgeschützt: Das SVGAnimatedLength-Objekt lässt sich nicht ersetzen. Über width.baseVal (ein SVGLength) kann man den Grundwert aber lesen und ändern, etwa mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). width.animVal liefert den aktuellen, eventuell durch SMIL-Animation veränderten Wert und ist nur lesbar.

Fehlt das Attribut width, gilt als Standard 100% des Filterbereichs. Wie der Wert zu verstehen ist, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab: Bei userSpaceOnUse (Standard) gilt er in Benutzerkoordinaten, bei objectBoundingBox als Anteil des Begrenzungsrahmens des gefilterten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (nur lesbarer, animierter Wert).

Beispiele

Breite einer feMorphology-Primitive auslesen

// HTML: <svg><filter id="dick"><feMorphology id="morph" operator="dilate" radius="2" width="150"/></filter></svg>
const morph = document.getElementById('morph');

console.log(morph.width instanceof SVGAnimatedLength);
console.log(morph.width.baseVal.value);
console.log(morph.width.baseVal.valueAsString);

true 150 150

Standardwert ohne gesetztes width-Attribut

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

// Kein width-Attribut → Standard ist 100 %
const len = morph.width.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueAsString);

true 100%

Breite zur Laufzeit ändern

const morph = document.querySelector('feMorphology');

// Teilbereich auf 50 % des Filterbereichs begrenzen
morph.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

console.log(morph.getAttribute('width'));

// Alternativ direkt über das Attribut
morph.setAttribute('width', '200');
console.log(morph.width.baseVal.value);

50% 200

// Wichtig · Fallstricke

Nur lesbar: morph.width = 100 ändert nichts (im Strict Mode gibt es einen TypeError). Ändern Sie stattdessen width.baseVal oder das Attribut per setAttribute().
baseVal.value rechnet Prozentwerte in Benutzereinheiten um. Bei Elementen, die nicht im gerenderten Dokument hängen, kann das 0 oder ungenaue Werte liefern. Den ursprünglichen Wert erhalten Sie zuverlässiger über valueInSpecifiedUnits bzw. valueAsString.
width legt nur den Teilbereich (Clipping) der Primitive fest, nicht die Stärke des Effekts. Diese steuert man mit radius (siehe radiusX/radiusY).
Negative Werte sind ungültig, und 0 schaltet die Primitive ab: Ihr Ergebnis ist dann transparent.
Kompatibilität: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. SMIL-Animationen, die animVal beeinflussen, gibt es im alten Internet Explorer nicht.

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.height SVGFEMorphologyElement.x SVGFEMorphologyElement.y SVGFEMorphologyElement.radiusX SVGAnimatedLength SVGLength