SVGRect.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGRect.x

Beschreibung

Die Eigenschaft x eines SVGRect enthält die horizontale Position der linken oberen Ecke eines Rechtecks. Der Wert ist eine Gleitkommazahl in Benutzerkoordinaten (User Units) des jeweiligen SVG-Koordinatensystems, also nicht zwingend in CSS-Pixeln.

SVGRect-Objekte bekommt man meist über SVGGraphicsElement.getBBox() (Begrenzungsrahmen eines Elements), über svgElement.viewBox.baseVal (den viewBox des Wurzelelements) oder als neues Objekt über SVGSVGElement.createSVGRect(). Zusammen mit y, width und height beschreibt x das Rechteck vollständig.

In SVG 2 ist SVGRect nur noch ein Alias für DOMRect. In den meisten Fällen kann die Eigenschaft beschrieben werden: Setzt man etwa viewBox.baseVal.x, ändert sich sofort das viewBox-Attribut des Elements – ideal zum Verschieben (Panning) einer Ansicht, ohne Attribut-Strings zusammenzubauen.

Rückgabewert

Typ

number

Beschreibung

Horizontale Koordinate der linken oberen Ecke als Gleitkommazahl (double) in Benutzerkoordinaten. Der Wert kann negativ sein.

Beispiele

Begrenzungsrahmen eines Elements auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '40');
circle.setAttribute('r', '20');
svg.appendChild(circle);
document.body.appendChild(svg); // getBBox braucht ein gerendertes Element

const box = circle.getBBox();
console.log(`x: ${box.x}, Breite: ${box.width}`);

x: 30, Breite: 40

Ansicht horizontal verschieben (Panning über viewBox)

const svg = document.querySelector('svg'); // <svg viewBox="0 0 200 100">
const viewBox = svg.viewBox.baseVal;

const panBy = (dx) => {
  viewBox.x += dx; // aktualisiert direkt das viewBox-Attribut
};

panBy(25);
console.log(viewBox.x, svg.getAttribute('viewBox'));

25 "25 0 200 100"

Neues Rechteck erzeugen und prüfen, ob ein Punkt darin liegt

const svg = document.querySelector('svg');
const rect = svg.createSVGRect();
rect.x = 10;
rect.y = 10;
rect.width = 80;
rect.height = 40;

const contains = (r, px, py) =>
  px >= r.x && px <= r.x + r.width &&
  py >= r.y && py <= r.y + r.height;

console.log(contains(rect, 50, 30)); // true
console.log(contains(rect, 5, 30));  // false

true false

// Wichtig · Fallstricke

Nur lesbare Rechtecke: Werte aus viewBox.animVal dürfen nicht verändert werden. Ein Schreibversuch wirft je nach Browser eine NoModificationAllowedError-DOMException oder wird ignoriert. Zum Ändern immer baseVal verwenden.
Kopie oder Live-Objekt: getBBox() liefert eine Momentaufnahme. Änderungen an box.x verschieben das Element nicht. viewBox.baseVal dagegen ist mit dem Attribut verknüpft.
Koordinatensystem: getBBox().x bezieht sich auf das lokale Benutzerkoordinatensystem des Elements, ohne dessen eigene transform. Für Bildschirmkoordinaten stattdessen getBoundingClientRect() oder getScreenCTM() nutzen.
Ist das Element nicht gerendert (z. B. display: none oder noch nicht im Dokument), liefert getBBox() je nach Browser 0-Werte oder wirft einen Fehler.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Seit SVG 2 ist SVGRect ein Alias von DOMRect, deshalb kann instanceof DOMRect je nach Browser true liefern.

Siehe auch

SVGRect SVGRect.y SVGRect.width SVGRect.height SVGGraphicsElement.getBBox() SVGSVGElement.createSVGRect() DOMRect