SVGImageElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGImageElement.x

Beschreibung

Die Eigenschaft x des SVGImageElement gibt ein SVGAnimatedLength-Objekt zurück, das dem x-Attribut des <image>-Elements entspricht. Es beschreibt die horizontale Position der linken oberen Ecke des Bildbereichs im aktuellen Benutzerkoordinatensystem.

Die Eigenschaft selbst ist schreibgeschützt – das zurückgegebene Objekt ist aber „lebendig“: Über x.baseVal (ein SVGLength) liest und ändert man den im Attribut hinterlegten Grundwert, über x.animVal liest man den aktuell wirksamen, ggf. per SMIL animierten Wert. Änderungen an baseVal.value werden sofort in das Attribut zurückgeschrieben.

Typische Einsatzfälle sind das programmatische Verschieben von Bildern in SVG-Grafiken, Drag-and-drop in Diagrammen oder das Auslesen der Position in Pixeln, auch wenn das Attribut in anderen Einheiten (z. B. % oder em) angegeben wurde.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (veränderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert). Fehlt das Attribut, ist der Wert 0.

Beispiele

x-Position eines Bildes auslesen

// <svg><image id="logo" href="logo.png" x="20" y="10" width="100" height="50"/></svg>
const img = document.getElementById('logo');
console.log(img.x.baseVal.value);      // Grundwert in Benutzereinheiten
console.log(img.x.animVal.value);      // aktuell wirksamer Wert
console.log(img.x.baseVal.valueAsString);

20 20 "20"

Bild programmatisch verschieben

const img = document.querySelector('svg image');

// Um 50 Einheiten nach rechts verschieben
img.x.baseVal.value += 50;

// Das Attribut wird automatisch aktualisiert
console.log(img.getAttribute('x'));

"70"

Einheiten umrechnen und Prozentwerte setzen

const img = document.querySelector('svg image');
const len = img.x.baseVal;

// Wert in Prozent der Viewport-Breite setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(img.getAttribute('x'));   // "25%"

// Wert in Benutzereinheiten (px) auslesen
console.log(len.value);

"25%" (z. B. 100 bei 400 px breitem Viewport)

Einfaches Horizontal-Drag mit der Maus

const svg = document.querySelector('svg');
const img = svg.querySelector('image');
let startX = 0;
let startPos = 0;

const onMove = (e) => {
  img.x.baseVal.value = startPos + (e.clientX - startX);
};

img.addEventListener('pointerdown', (e) => {
  startX = e.clientX;
  startPos = img.x.baseVal.value;
  svg.addEventListener('pointermove', onMove);
});

window.addEventListener('pointerup', () => {
  svg.removeEventListener('pointermove', onMove);
});

// Wichtig · Fallstricke

Nicht direkt zuweisen: img.x = 50 hat keine Wirkung (bzw. wirft im Strict-Modus einen TypeError). Ändern Sie stattdessen img.x.baseVal.value oder nutzen Sie setAttribute('x', …).
animVal ist schreibgeschützt; Schreibversuche werfen eine NoModificationAllowedError-Ausnahme.
Bei relativen Einheiten (%, em) hängt baseVal.value vom Kontext ab; ist das Element nicht im Dokument eingehängt, kann die Umrechnung fehlschlagen oder ungenaue Werte liefern.
In SVG 2 ist x auch eine CSS-Geometrie-Eigenschaft. Ein per CSS gesetztes x überschreibt das Attribut in der Darstellung, wird aber nicht in baseVal widergespiegelt – verwenden Sie ggf. getBBox() bzw. getComputedStyle().
Kompatibilität: In allen modernen Browsern seit Langem unterstützt.

Siehe auch

SVGImageElement SVGImageElement.y SVGImageElement.width SVGImageElement.height SVGAnimatedLength SVGLength StorageEvent.oldValue