SVGSVGElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGSVGElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGSVGElement spiegelt das Attribut x eines <svg>-Elements wider. Sie gibt ein SVGAnimatedLength-Objekt zurück, über das man den im Markup gesetzten Wert (baseVal) und den aktuell animierten Wert (animVal) jeweils als SVGLength auslesen kann.

Sinnvoll ist die Eigenschaft vor allem bei verschachtelten SVGs: Ein inneres <svg> wird über x und y im Koordinatensystem des umgebenden SVGs verschoben. Beim äußersten <svg>-Element (direkt im HTML-Dokument) hat x dagegen keine Wirkung auf die Darstellung.

Die Eigenschaft selbst ist schreibgeschützt – das Objekt kann nicht ersetzt werden. Den Wert ändert man über svg.x.baseVal.value, baseVal.valueAsString, baseVal.newValueSpecifiedUnits() oder schlicht per setAttribute("x", …).

In SVG 2 ist x zudem eine Geometrie-Eigenschaft und kann per CSS gesetzt werden; animVal spiegelt dann in manchen Browsern den berechneten Wert wider.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Basiswert aus dem Attribut) und animVal (aktueller, ggf. animierter Wert), beide vom Typ SVGLength. Fehlt das Attribut, ist der Wert 0.

Beispiele

Position eines verschachtelten SVGs auslesen

// <svg id="outer" width="300" height="200">
//   <svg id="inner" x="50" y="20" width="100" height="100">…</svg>
// </svg>
const inner = document.getElementById("inner");

console.log(inner.x.baseVal.value);          // Zahl in Benutzereinheiten
console.log(inner.x.baseVal.valueAsString);  // Originalschreibweise
console.log(inner.x.animVal.value);          // aktueller (animierter) Wert

50 "50" 50

Inneres SVG per Code verschieben

const inner = document.querySelector("#inner");

// Die Eigenschaft x selbst ist readonly – den Wert über baseVal ändern
inner.x.baseVal.value = 120;
console.log(inner.getAttribute("x"));

// Mit Einheit setzen (Prozent relativ zum Viewport des äußeren SVGs)
inner.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(inner.x.baseVal.valueAsString);

"120" "25%"

Einfache Animation mit requestAnimationFrame

const inner = document.querySelector("#inner");
let pos = 0;

const step = () => {
  pos = (pos + 2) % 200;
  inner.x.baseVal.value = pos;
  requestAnimationFrame(step);
};

requestAnimationFrame(step);

Fehlendes Attribut und schreibgeschützte Eigenschaft

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
console.log(svg.x.baseVal.value); // Standardwert

"use strict";
try {
  svg.x = 10; // hat keine Wirkung (im Strict Mode: TypeError)
} catch (e) {
  console.log(e.name);
}
console.log(svg.x instanceof SVGAnimatedLength);

0 TypeError true

// Wichtig · Fallstricke

Readonly: svg.x = 10 ändert nichts (im Strict Mode TypeError). Immer svg.x.baseVal.value oder setAttribute("x", …) verwenden.
Äußeres SVG: Beim äußersten <svg> in HTML hat x keine Wirkung auf die Darstellung – dort CSS (position, transform) nutzen.
Einheiten: baseVal.value liefert immer Benutzereinheiten (px). Bei Prozentwerten braucht die Umrechnung einen gerenderten Kontext; bei nicht im DOM eingehängten Elementen kann das Ergebnis 0 sein oder ein Fehler auftreten.
animVal ist schreibgeschützt; Schreibzugriffe darauf lösen einen NoModificationAllowedError aus.
Kompatibilität: In allen modernen Browsern unterstützt. Das Setzen von x per CSS (SVG 2) wird nicht überall einheitlich im DOM-Wert widergespiegelt.

Siehe auch

SVGSVGElement SVGSVGElement.y SVGSVGElement.width SVGSVGElement.height SVGAnimatedLength SVGLength MathMLElement.nonce