SVGFEBlendElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFEBlendElement steht für das x-Attribut eines <feBlend>-Elements. Sie gibt die horizontale Koordinate der linken oberen Ecke des Teilbereichs (filter primitive subregion) an, auf den das Filterprimitiv angewendet wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Es hat zwei Bestandteile: baseVal ist der im Markup gesetzte Grundwert und lässt sich verändern. animVal ist der aktuelle Wert, der sich gerade durch SMIL-Animationen ändern kann, und ist schreibgeschützt. Beide sind SVGLength-Objekte mit den Eigenschaften value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen, das zurückgegebene Objekt aber verändern, z. B. über x.baseVal.value oder newValueSpecifiedUnits(). Wie der Wert ausgelegt wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab: Bei userSpaceOnUse (Standard) gilt er im Benutzerkoordinatensystem, bei objectBoundingBox als Bruchteil bzw. Prozentwert des Begrenzungsrahmens.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt. baseVal ist der Grundwert, animVal der aktuell animierte Wert. Ohne gesetztes Attribut gilt der Standardwert 0%.

Beispiele

x-Koordinate eines feBlend-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="mix">
    <feBlend in="SourceGraphic" in2="BackgroundImage" mode="multiply" x="15" y="10" width="100" height="80"/>
  </filter>`;
document.body.append(svg);

const blend = svg.querySelector('feBlend');
console.log(blend.x instanceof SVGAnimatedLength);
console.log(blend.x.baseVal.value);
console.log(blend.x.animVal.value);

true 15 15

x-Position per Skript ändern

const blend = document.querySelector('feBlend');

// Grundwert direkt in Benutzereinheiten setzen
blend.x.baseVal.value = 40;
console.log(blend.getAttribute('x'));

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

40 25%

Einheitentyp prüfen

const blend = document.querySelector('feBlend');
const { unitType, valueInSpecifiedUnits } = blend.x.baseVal;

const isPercent = unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE;
console.log(isPercent ? `${valueInSpecifiedUnits} %` : `${valueInSpecifiedUnits} Benutzereinheiten`);

25 %

// Wichtig · Fallstricke

Schreibgeschützt: blend.x = 10 wird stillschweigend ignoriert (im Strict Mode gibt es einen TypeError). Ändern lässt sich der Wert nur über blend.x.baseVal oder mit setAttribute('x', …).
animVal ist immer schreibgeschützt. Ein Schreibversuch löst eine NoModificationAllowedError-DOMException aus.
Bei Prozent- oder em-Werten kann das Auslesen von baseVal.value einen umgerechneten Wert liefern oder Fehler auslösen, solange das Element nicht im gerenderten Dokument hängt. Nutze dann valueInSpecifiedUnits oder valueAsString.
Der Wert wirkt sich nur auf den Teilbereich des Filterprimitivs aus, nicht auf die Position der Grafik selbst. Liegt er außerhalb des Filterbereichs (<filter x/y/width/height>), wird das Ergebnis abgeschnitten.
Kompatibilität: wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Die Filter-Eingabe BackgroundImage hingegen wird von den meisten Browsern nicht unterstützt.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.y SVGFEBlendElement.width SVGFEBlendElement.height SVGAnimatedLength SVGLength HTMLTableColElement.ch