SVGRect.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGRect.y

Beschreibung

Die Eigenschaft y eines SVGRect enthält die vertikale Koordinate des Ursprungs eines Rechtecks im jeweiligen Koordinatensystem, als Gleitkommazahl. Ist die Höhe positiv, ist das die obere Kante. Seit SVG 2 ist SVGRect nur noch ein Alias für DOMRect, und y verhält sich genau wie DOMRect.y.

SVGRect-Objekte bekommt man vor allem über SVGGraphicsElement.getBBox() (die Begrenzungsbox eines Elements in Benutzereinheiten), über SVGSVGElement.createSVGRect() und über die animierte viewBox (svg.viewBox.baseVal bzw. animVal).

Die Eigenschaft ist grundsätzlich beschreibbar. Ob eine Änderung aber etwas am Dokument bewirkt, hängt davon ab, woher das Objekt stammt. Schreibt man in viewBox.baseVal.y, ändert sich das viewBox-Attribut sofort, und damit lässt sich zum Beispiel ein Bildausschnitt vertikal verschieben. Ein Rechteck aus getBBox() ist dagegen nur eine Momentaufnahme: Änderungen daran wirken sich nicht auf das Element aus.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Nur beim Setzen: die neue y-Koordinate in Benutzereinheiten. Wird in eine Gleitkommazahl umgewandelt (`unrestricted double`).

Rückgabewert

Typ

number

Beschreibung

Die y-Koordinate des Rechtecks als Gleitkommazahl in Benutzereinheiten des jeweiligen Koordinatensystems.

Beispiele

Obere Kante einer Begrenzungsbox mit getBBox() lesen

const svg = document.querySelector('svg');
const text = svg.querySelector('text');

const box = text.getBBox(); // SVGRect bzw. DOMRect
console.log(`Text beginnt bei y = ${box.y.toFixed(2)}`);
console.log(`Unterkante: ${(box.y + box.height).toFixed(2)}`);

Text beginnt bei y = 12.34 Unterkante: 30.12

viewBox vertikal verschieben (Scrollen im SVG)

const svg = document.querySelector('svg'); // z. B. viewBox="0 0 400 300"
const vb = svg.viewBox.baseVal;

svg.addEventListener('wheel', (event) => {
  event.preventDefault();
  vb.y += event.deltaY * 0.5; // ändert direkt das viewBox-Attribut
  console.log(svg.getAttribute('viewBox'));
}, { passive: false });

0 50 400 300

Rechteck mit createSVGRect() anlegen und prüfen

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

console.log(rect.y, rect instanceof DOMRect);

// Rechteck mit negativer Höhe: y ist dann die untere Kante
const flipped = new DOMRect(0, 100, 50, -80);
console.log(flipped.y, flipped.top);

40 true 100 20

// Wichtig · Fallstricke

Momentaufnahme oder lebendiges Objekt: Ein Rechteck aus getBBox() ist nicht an das Element gebunden. Wenn Sie box.y setzen, bewegt sich das Element nicht. Nur viewBox.baseVal wirkt auf das Dokument zurück.
animVal ist schreibgeschützt: Wer in viewBox.animVal.y schreibt, löst einen NoModificationAllowedError aus. Schreiben Sie stattdessen in baseVal.
y ist nicht dasselbe wie top: Bei negativer Höhe ist y die untere Kante. top (nur bei DOMRect) liefert immer den kleineren Wert.
Koordinatensystem: getBBox() rechnet im lokalen Benutzerkoordinatensystem, also ohne die Transformationen der Elternelemente. Für Bildschirmkoordinaten verwenden Sie getBoundingClientRect().
getBBox() kann einen Fehler werfen oder Nullen liefern, wenn das Element nicht dargestellt wird (z. B. bei display: none oder wenn es noch nicht im DOM hängt).
Kompatibilität: Wird von allen modernen Browsern unterstützt. In älteren Engines ist SVGRect eine eigene Schnittstelle ohne Vererbung von DOMRect; die Eigenschaft y gibt es dort trotzdem.

Siehe auch

SVGRect SVGRect.x SVGRect.height DOMRect.y SVGGraphicsElement.getBBox() SVGSVGElement.createSVGRect() CSSScale.y