SVGFilterElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFilterElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFilterElement gibt das x-Attribut des <filter>-Elements wieder. Dieses Attribut legt zusammen mit y, width und height die Filterregion fest. Das ist der rechteckige Bereich, in dem der Filter und seine Filterprimitive (<feGaussianBlur>, <feOffset> usw.) gezeichnet werden. x ist dabei die horizontale Koordinate der linken oberen Ecke.

Zurückgegeben wird ein SVGAnimatedLength-Objekt und keine einfache Zahl. Über baseVal kommst du an den im Markup bzw. per Skript gesetzten Wert, animVal liefert den Wert, der gerade gilt, auch während einer SMIL-Animation. Die Eigenschaft selbst ist schreibgeschützt. Den Wert änderst du über das SVGLength-Objekt in baseVal, z. B. mit value, valueAsString oder newValueSpecifiedUnits(), oder direkt mit setAttribute('x', …).

Wie der Wert gedeutet wird, hängt von filterUnits ab. Beim Standardwert objectBoundingBox sind Angaben wie -0.1 oder -10% Anteile der Bounding Box des gefilterten Elements. Bei userSpaceOnUse sind es Koordinaten im Benutzerkoordinatensystem. Fehlt das Attribut, gilt -10%. Die Filterregion ist also standardmäßig etwas größer als das Element, damit Effekte wie Unschärfe oder Schatten nicht abgeschnitten werden.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (der gesetzte Wert als SVGLength, beschreibbar) und animVal (der gerade gültige, ggf. animierte Wert als SVGLength, nur lesbar).

Beispiele

x-Wert eines Filters auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
//     <feGaussianBlur stdDeviation="8" />
//   </filter>
//   <circle cx="100" cy="100" r="50" filter="url(#blur)" />
// </svg>

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

console.log(baseVal.valueAsString);
console.log(baseVal.valueInSpecifiedUnits);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

-20% -20 true

Filterregion vergrößern, damit der Schatten nicht abgeschnitten wird

const shadow = document.querySelector('#shadow');

// Filterregion nach links auf -30 % erweitern
shadow.x.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  -30
);
shadow.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  160
);

console.log(shadow.getAttribute('x'));
console.log(shadow.getAttribute('width'));

-30% 160%

Filter per Skript im Benutzerkoordinatensystem anlegen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'glow';
filter.setAttribute('filterUnits', 'userSpaceOnUse');

const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '4');
filter.append(blur);
svg.append(filter);

// x in Benutzereinheiten setzen
filter.x.baseVal.value = 10;
filter.width.baseVal.value = 180;

console.log(filter.getAttribute('x'));
console.log(filter.x.animVal.value);

10 10

// Wichtig · Fallstricke

Nicht direkt zuweisbar: filter.x = 10 hat keine Wirkung und wirft im Strict Mode einen TypeError. Setze stattdessen filter.x.baseVal.value oder nutze setAttribute('x', …).
Es geht um die Filterregion, nicht um ein Primitiv: Die MDN-Formulierung „Position eines Filter-Primitivs“ ist ungenau. SVGFilterElement.x betrifft die Region des ganzen Filters. Die Teilregionen einzelner Primitive steuerst du über deren eigene x-Eigenschaft, etwa SVGFEGaussianBlurElement.x.
Einheiten hängen von filterUnits ab: Bei objectBoundingBox (Standard) ist baseVal.value bei Prozentwerten nicht immer aussagekräftig, weil die Umrechnung von der Bounding Box abhängt. Nimm besser valueAsString oder valueInSpecifiedUnits.
Abgeschnittene Effekte: Ist die Filterregion zu klein (z. B. x=\"0\" bei einem Schlagschatten nach links), wird der Effekt am Rand abgeschnitten.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. animVal ändert sich nur bei SMIL-Animationen. Bei CSS-Animationen ändert es sich nicht, weil x bei <filter> keine CSS-Eigenschaft ist.

Siehe auch

SVGFilterElement SVGFilterElement.y SVGFilterElement.width SVGFilterElement.height SVGFilterElement.filterUnits SVGAnimatedLength SVGLength