SVGRectElement.x — Eigenschaft · JavaScript-Referenz

Signatur

get SVGRectElement.x

Beschreibung

Die Eigenschaft x des SVGRectElement spiegelt das SVG-Attribut x eines <rect>-Elements wider, also die horizontale Koordinate der linken oberen Ecke im aktuellen Benutzerkoordinatensystem. Sie gibt keine Zahl zurück, sondern ein SVGAnimatedLength-Objekt.

Dieses Objekt hat zwei Teile: baseVal ist der statische Grundwert aus dem Attribut und lässt sich ändern. animVal ist der aktuelle Wert während einer SMIL-Animation und kann nur gelesen werden. Beide sind SVGLength-Objekte mit den Eigenschaften value (in Benutzereinheiten), valueInSpecifiedUnits, valueAsString und unitType.

Man nutzt rect.x, wenn man die Position eines Rechtecks per Skript lesen oder typsicher ändern will, etwa für Drag-and-drop, Diagramme oder Animationen mit requestAnimationFrame. Anders als bei getAttribute('x') bekommt man damit den bereits ausgewerteten Zahlenwert und kann Einheiten wie Prozent oder em gezielt umrechnen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein schreibgeschütztes Objekt mit baseVal (änderbarer Grundwert, SVGLength) und animVal (aktueller animierter Wert, nur lesbar). Fehlt das Attribut, ist der Wert 0.

Beispiele

x-Position eines Rechtecks auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', '40');
rect.setAttribute('y', '20');
rect.setAttribute('width', '100');
rect.setAttribute('height', '50');
svg.append(rect);
document.body.append(svg);

console.log(rect.x.baseVal.value);
console.log(rect.x.baseVal.valueAsString);
console.log(rect.x.animVal.value);

40 "40" 40

Rechteck horizontal verschieben (Animation mit requestAnimationFrame)

const rect = document.querySelector('svg rect');
const length = rect.x.baseVal;

const step = () => {
  // Wert direkt in Benutzereinheiten setzen – aktualisiert auch das Attribut
  length.value = (length.value + 2) % 300;
  requestAnimationFrame(step);
};
requestAnimationFrame(step);

// Das Attribut wird automatisch synchronisiert:
setTimeout(() => console.log(rect.getAttribute('x')), 100);

z. B. "52"

Einheiten umrechnen (Prozent in Pixel)

const rect = document.querySelector('svg rect');
rect.setAttribute('x', '25%');

const len = rect.x.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);

// In Benutzereinheiten (px) umwandeln
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(rect.getAttribute('x'));

true 25 z. B. "100px" (bei 400px breitem SVG)

// Wichtig · Fallstricke

Kein Zahlenwert: rect.x ist ein Objekt. rect.x + 10 liefert keinen sinnvollen Wert – verwende rect.x.baseVal.value.
Nur lesbar: rect.x = 50 hat keine Wirkung (im strikten Modus gibt es einen TypeError). Ändere stattdessen rect.x.baseVal.value oder nutze setAttribute('x', …).
animVal: Dieser Wert zeigt nur SMIL-Animationen (<animate>). CSS-Animationen und die CSS-Eigenschaft x (SVG 2) erscheinen dort nicht. Den tatsächlich gerenderten Wert erhältst du über getComputedStyle(rect).x oder rect.getBBox().x.
Relative Einheiten: Bei Prozent- oder em-Werten kann value eine Ausnahme werfen oder 0 liefern, solange das Element nicht im gerenderten Dokument hängt.
Namensraum: Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', 'rect') erzeugt werden. Mit createElement entsteht kein SVGRectElement, und x ist dann undefined.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGRectElement SVGRectElement.y SVGRectElement.width SVGRectElement.height SVGAnimatedLength SVGLength SVGGraphicsElement.getBBox()