SVGFEGaussianBlurElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.x

Beschreibung

Die Eigenschaft x gehört zum Interface SVGFEGaussianBlurElement, das im DOM ein <feGaussianBlur>-Element darstellt. Sie spiegelt das SVG-Attribut x wider. Dieses legt die linke Kante des Filter-Primitive-Teilbereichs fest, also des Rechtecks, auf das der Weichzeichner-Effekt beschränkt wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt und keine einfache Zahl. Über baseVal erreichst du den statischen Grundwert, über animVal den aktuellen, eventuell per SMIL animierten Wert. Beide sind vom Typ SVGLength und bieten value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Wie x ausgewertet wird, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab. Bei userSpaceOnUse (Standard) gilt der Wert im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentwert der Bounding-Box des gefilterten Elements. Fehlt das Attribut, beträgt der Standardwert 0% des Filterbereichs.

Die Eigenschaft selbst kann nicht neu zugewiesen werden. Den Wert änderst du über x.baseVal.value, x.baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute('x', …).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (Grundwert) und animVal (animierter Wert), beide vom Typ SVGLength. Sie beschreiben die x-Koordinate des Filter-Primitive-Teilbereichs.

Beispiele

x-Wert eines feGaussianBlur auslesen

// Zur Laufzeit ein SVG mit Filter erzeugen
document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="120">
    <filter id="blur">
      <feGaussianBlur id="gb" x="10" y="5" width="150" height="100" stdDeviation="4" />
    </filter>
    <rect x="20" y="20" width="150" height="80" fill="teal" filter="url(#blur)" />
  </svg>`);

const blur = document.getElementById('gb');
console.log(blur instanceof SVGFEGaussianBlurElement);
console.log(blur.x.baseVal.value);
console.log(blur.x.animVal.value);

true 10 10

Filterbereich per Grundwert verschieben

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

// Grundwert in Benutzereinheiten ändern – das Attribut wird automatisch angepasst
blur.x.baseVal.value = 40;
console.log(blur.getAttribute('x'));

// Wert mit Einheit Prozent setzen
blur.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(blur.x.baseVal.valueAsString);

40 25%

Einheit prüfen und Zuweisung an x selbst vermeiden

const blur = document.querySelector('feGaussianBlur');
const { baseVal } = blur.x;

const units = {
  [SVGLength.SVG_LENGTHTYPE_NUMBER]: 'Benutzereinheiten',
  [SVGLength.SVG_LENGTHTYPE_PERCENTAGE]: 'Prozent',
  [SVGLength.SVG_LENGTHTYPE_PX]: 'Pixel'
};
console.log(`x = ${baseVal.valueInSpecifiedUnits} (${units[baseVal.unitType] ?? 'andere Einheit'})`);

// Die Eigenschaft x ist schreibgeschützt: Die Zuweisung bleibt wirkungslos
// (im Strict Mode wird ein TypeError ausgelöst)
try {
  'use strict';
  blur.x = 99;
} catch (e) {
  console.log(e.name);
}
console.log(blur.x instanceof SVGAnimatedLength);

x = 25 (Prozent) true

// Wichtig · Fallstricke

Kein Zahlenwert: blur.x liefert ein SVGAnimatedLength-Objekt. Häufiger Fehler: blur.x + 10 statt blur.x.baseVal.value + 10.
Schreibgeschützt: Die Eigenschaft selbst lässt sich nicht ersetzen. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode (z. B. in ES-Modulen) einen TypeError aus. Ändere stattdessen baseVal.
animVal ist nur lesbar: Wer animVal.value setzt, löst einen Fehler aus (NoModificationAllowedError).
Relative Einheiten: Bei Prozentwerten oder primitiveUnits="objectBoundingBox" kann baseVal.value vom sichtbaren Ergebnis abweichen oder sich erst nach dem Layout auflösen. Wenn die angegebene Einheit wichtig ist, nutze valueInSpecifiedUnits und unitType.
Clipping: Ein zu kleiner Teilbereich schneidet den Weichzeichner hart ab. Der Blur reicht über die Kanten des Objekts hinaus, also sollte der Bereich großzügig bemessen sein.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Sie stammt aus dem gemeinsamen Mixin SVGFilterPrimitiveStandardAttributes und existiert gleichermaßen bei allen SVGFE*Element-Interfaces.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.y SVGFEGaussianBlurElement.width SVGFEGaussianBlurElement.height SVGFEGaussianBlurElement.stdDeviationX SVGAnimatedLength SVGLength SVGFilterElement