SVGUseElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGUseElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGUseElement entspricht dem Attribut x eines <use>-Elements. Sie gibt an, um wie viel das referenzierte Element (z. B. ein <symbol>, eine <g>-Gruppe oder eine Form) entlang der x-Achse verschoben dargestellt wird. Intern wirkt das wie eine zusätzliche translate(x, y)-Transformation.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, du kannst also kein neues Objekt zuweisen. Den Wert änderst du aber über x.baseVal (ein SVGLength), etwa mit baseVal.value oder baseVal.newValueSpecifiedUnits(). Den aktuell angezeigten Wert, einschließlich laufender SMIL-Animationen, liest du über x.animVal.

Typische Anwendungen sind Icon-Sprites, bei denen ein und dasselbe <symbol> an mehreren Positionen angezeigt wird, sowie interaktive Grafiken, in denen Kopien eines Elements per Skript verschoben werden. Fehlt das Attribut, ist der Wert 0.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, gerade animierter Wert). Ohne gesetztes Attribut ist der Wert 0.

Beispiele

x-Koordinate eines use-Elements auslesen

// <svg><defs><circle id="punkt" r="5"/></defs>
//   <use id="kopie" href="#punkt" x="40" y="20"/></svg>
const use = document.getElementById('kopie');

console.log(use.x.baseVal.value);             // Wert in Benutzereinheiten
console.log(use.x.baseVal.valueAsString);     // Wert als Text wie im Attribut
console.log(use.x.animVal.value);             // aktuell dargestellter Wert

40 "40" 40

Symbol mehrfach per Skript platzieren

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

// Fünf Kopien des Symbols #stern nebeneinander anlegen
for (let i = 0; i < 5; i++) {
  const use = document.createElementNS(NS, 'use');
  use.setAttribute('href', '#stern');
  use.x.baseVal.value = i * 30; // setzt das x-Attribut
  use.y.baseVal.value = 10;
  svg.append(use);
}

console.log(svg.querySelectorAll('use')[4].getAttribute('x'));

"120"

Element per Pfeiltasten verschieben, Einheiten setzen

const figur = document.querySelector('use#figur');

document.addEventListener('keydown', (event) => {
  const len = figur.x.baseVal;
  if (event.key === 'ArrowRight') len.value += 10;
  if (event.key === 'ArrowLeft') len.value -= 10;
});

// Wert in Prozent setzen (bezogen auf die Breite des Viewports)
figur.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(figur.getAttribute('x'));

"50%"

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie use.x = 10 hat keine Wirkung, im Strict Mode wirft sie einen TypeError. Ändere stattdessen use.x.baseVal.value oder nutze setAttribute('x', …).
animVal ist schreibgeschützt. Da die meisten Browser animVal nicht getrennt ausweisen, entspricht es dort meist baseVal.
Bei relativen Einheiten (%, em) kann baseVal.value einen umgerechneten Wert liefern. Den Originalwert erhältst du über valueInSpecifiedUnits bzw. valueAsString.
x wirkt zusätzlich zu einem vorhandenen transform-Attribut, die Translation wird danach angewendet.
In SVG 2 ist x auch als CSS-Eigenschaft verfügbar. CSS-Werte überschreiben das Attribut, spiegeln sich aber nicht in baseVal wider.
Kompatibilität: wird in allen modernen Browsern unterstützt. Für ältere Browser xlink:href statt href verwenden.

Siehe auch

SVGUseElement SVGUseElement.y SVGUseElement.width SVGUseElement.height SVGUseElement.href SVGAnimatedLength SVGLength