SVGFEGaussianBlurElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.width

Beschreibung

Die Eigenschaft width des SVGFEGaussianBlurElement steht für das width-Attribut des Elements <feGaussianBlur>. Dieses Attribut legt die Breite des Filterprimitiv-Teilbereichs (filter primitive subregion) fest, also des Rechtecks, in dem das Ergebnis des Weichzeichners berechnet und abgeschnitten wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über width.baseVal (ein SVGLength) ändern. width.animVal liefert den aktuellen, gegebenenfalls durch SMIL-Animation veränderten Wert.

Fehlt das Attribut, gilt als Standardwert 100% der Filterregion. Wie Prozent- und Zahlenwerte ausgelegt werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

In der Praxis braucht man die Eigenschaft, um den Wirkungsbereich eines Weichzeichners per Skript zu lesen oder anzupassen, etwa damit ein Schatten- oder Leuchteffekt nicht an den Rändern abgeschnitten wird.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

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

Beispiele

Breite eines Weichzeichner-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="blur" primitiveUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="4" x="0" y="0" width="200" height="100" />
  </filter>`;
document.body.append(svg);

const blur = svg.querySelector('feGaussianBlur');
console.log(blur.width.baseVal.value);
console.log(blur.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

200 true

Breite per Skript ändern

const blur = document.querySelector('#blur feGaussianBlur');

// Direkt als Zahl in Benutzereinheiten setzen
blur.width.baseVal.value = 320;
console.log(blur.getAttribute('width'));

// Als Prozentwert setzen
blur.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 150);
console.log(blur.getAttribute('width'));

320 150%

Standardwert ohne gesetztes Attribut

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

const { baseVal } = blur.width;
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(baseVal.valueInSpecifiedUnits);

true 100

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie blur.width = 100 hat keine Wirkung (im Strict Mode wird ein TypeError ausgelöst). Ändern lässt sich der Wert nur über blur.width.baseVal oder setAttribute('width', …).
Einheiten: baseVal.value liefert den Wert in Benutzereinheiten. Bei Prozentwerten braucht die Umrechnung einen Bezugskontext. Für den eingegebenen Wert selbst eignet sich valueInSpecifiedUnits besser.
Abschneiden: Ist width zu klein gewählt, wird der Weichzeichner an den Rändern hart abgeschnitten. Auch das width des übergeordneten <filter> begrenzt den Effekt.
animVal ist schreibgeschützt und spiegelt nur SMIL-Animationen wider, keine CSS-Übergänge.
Wird von allen modernen Browsern unterstützt. Die Eigenschaft stammt aus der gemeinsamen Schnittstelle SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.height SVGFEGaussianBlurElement.x SVGFEGaussianBlurElement.y SVGAnimatedLength SVGLength