SVGFEImageElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEImageElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFEImageElement spiegelt das Attribut x eines <feImage>-Elements wider. Sie gibt die horizontale Koordinate der linken oberen Ecke des Filterprimitiv-Teilbereichs an, also des Rechtecks, auf das das Ergebnis des Primitivs begrenzt wird. Innerhalb dieses Bereichs wird das über href referenzierte Bild bzw. Element gezeichnet.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, Sie können ihr also kein neues Objekt zuweisen. Über x.baseVal erreichen Sie jedoch ein veränderbares SVGLength, dessen value, valueInSpecifiedUnits oder valueAsString Sie setzen können. x.animVal enthält den aktuellen, gegebenenfalls durch SMIL-Animationen veränderten Wert und lässt sich nur lesen.

Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab. Beim Standardwert userSpaceOnUse ist er eine Koordinate im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentwert der Bounding-Box des gefilterten Elements. Fehlt das Attribut, beträgt der Standardwert 0%, bezogen auf den Filterbereich.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbares SVGLength, der Wert des Attributs) und animVal (schreibgeschütztes SVGLength, der aktuell animierte Wert).

Beispiele

x-Koordinate eines feImage auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="bildFilter">
//     <feImage id="img" href="logo.png" x="20" y="10" width="100" height="100" />
//   </filter>
//   <rect width="200" height="200" filter="url(#bildFilter)" />
// </svg>

const feImage = document.getElementById('img');
const { baseVal, animVal } = feImage.x;

console.log(baseVal.value);          // Wert in Benutzereinheiten
console.log(baseVal.valueAsString);  // Originalschreibweise
console.log(animVal.value);          // aktuell wirksamer Wert

20 "20" 20

Position per Skript ändern

const feImage = document.querySelector('feImage');

// Nicht erlaubt: feImage.x = 50 (Eigenschaft ist schreibgeschützt)
// Richtig: den Basiswert verändern
feImage.x.baseVal.value = 50;

console.log(feImage.getAttribute('x'));

"50"

Prozentwerte mit Einheit setzen

const feImage = document.querySelector('#bildFilter feImage');
const len = feImage.x.baseVal;

// Einheit und Wert gemeinsam setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);

console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueAsString);

true "25%"

Bild im Filter horizontal animieren

const feImage = document.querySelector('feImage');
let pos = 0;

const tick = () => {
  pos = (pos + 1) % 150;
  feImage.x.baseVal.value = pos;
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibgeschützt: Eine direkte Zuweisung wie feImage.x = 10 bleibt im nicht-strikten Modus ohne Wirkung und löst im Strict Mode einen TypeError aus. Ändern Sie den Wert über x.baseVal oder mit setAttribute('x', …).
Einheiten: baseVal.value liefert immer Benutzereinheiten. Prozentwerte werden dafür umgerechnet, und die Umrechnung kann 0 ergeben oder ungenau sein, solange das Element nicht gerendert ist. Mit valueInSpecifiedUnits und unitType lesen Sie den Wert in der ursprünglichen Einheit aus.
primitiveUnits: Steht primitiveUnits="objectBoundingBox" am Filter, bedeutet x="0.1" 10 % der Breite der Bounding-Box. Die Zahl hat also eine ganz andere Bedeutung als bei userSpaceOnUse.
animVal: Moderne Browser setzen SMIL-Animationen in animVal nicht immer getrennt um. Häufig ist animVal identisch mit baseVal.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer unterstützt SVG-Filter nur eingeschränkt.

Siehe auch

SVGFEImageElement SVGFEImageElement.y SVGFEImageElement.width SVGFEImageElement.height SVGFEImageElement.href SVGAnimatedLength SVGLength