SVGRectElement.y — Eigenschaft · JavaScript-Referenz

Signatur

get SVGRectElement.y

Beschreibung

Die schreibgeschützte Eigenschaft y der Schnittstelle SVGRectElement entspricht dem Attribut y eines <rect>-Elements. Sie gibt die vertikale Koordinate der oberen Kante des Rechtecks im aktuellen Benutzerkoordinatensystem an.

Zurückgegeben wird keine Zahl, sondern ein SVGAnimatedLength-Objekt. Es hat zwei Eigenschaften: baseVal ist der im Attribut gesetzte Grundwert, animVal ist der aktuelle Wert, wenn gerade eine SMIL-Animation läuft. Beide sind SVGLength-Objekte mit value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Die Eigenschaft selbst kannst du nicht neu zuweisen. Den Wert änderst du über rect.y.baseVal.value oder mit setAttribute("y", …). Das ist nützlich für Diagramme, Drag-and-Drop in SVG oder um Positionen bei Animationen per Skript auszulesen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal und animVal (jeweils SVGLength), das die y-Koordinate des Rechtecks beschreibt. Ohne gesetztes Attribut ist der Wert 0.

Beispiele

y-Koordinate auslesen

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "25");
rect.setAttribute("width", "100");
rect.setAttribute("height", "50");
svg.append(rect);
document.body.append(svg);

console.log(rect.y.baseVal.value);
console.log(rect.y.baseVal.valueAsString);

25 25

Rechteck per Skript vertikal verschieben

const rect = document.querySelector("rect");

// Bei jedem Klick um 10 Einheiten nach unten verschieben
rect.addEventListener("click", () => {
  rect.y.baseVal.value += 10;
  console.log(`Neue y-Position: ${rect.getAttribute("y")}`);
});

Neue y-Position: 35

Einheiten und Prozentwerte auswerten

const rect = document.querySelector("rect");
rect.setAttribute("y", "10%");

const len = rect.y.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);
// In Benutzereinheiten umgerechnet (relativ zur Viewport-Höhe)
console.log(len.value);

// Einheit wechseln: Wert in Pixel umrechnen
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(rect.getAttribute("y"));

true 10 15 (bei einer Viewport-Höhe von 150) 15px

// Wichtig · Fallstricke

Schreibgeschützt: rect.y = 20 hat keine Wirkung (im strikten Modus wirft es einen TypeError). Ändere den Wert stattdessen über rect.y.baseVal.value oder setAttribute().
animVal ist ebenfalls schreibgeschützt. Nur bei laufenden SMIL-Animationen weicht es von baseVal ab. CSS-Animationen der Eigenschaft y tauchen dort nicht auf; nutze dafür getComputedStyle(rect).y.
In SVG 2 ist y auch eine CSS-Eigenschaft. Eine CSS-Regel wie rect { y: 40px; } überschreibt das Attribut beim Rendern, aber baseVal zeigt weiter den Attributwert.
Bei Prozentwerten oder Einheiten wie em hängt value vom Viewport bzw. von der Schrift ab. Bei Elementen, die nicht im Dokument hängen, kann die Umrechnung ungenau sein.
Elemente musst du mit createElementNS() und dem SVG-Namensraum erzeugen, sonst entsteht kein SVGRectElement und y ist undefined.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGRectElement SVGRectElement.x SVGRectElement.width SVGRectElement.height SVGAnimatedLength SVGLength HTMLTrackElement.src