SVGSVGElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGSVGElement.y

Beschreibung

Die Eigenschaft y von SVGSVGElement spiegelt das Attribut y eines <svg>-Elements wider. Sie gibt an, wie weit ein verschachteltes <svg>-Element innerhalb des umgebenden SVG-Koordinatensystems nach unten versetzt ist. Beim äußersten <svg>-Element (direkt im HTML-Dokument) hat y keine Wirkung.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt mit zwei Unterobjekten vom Typ SVGLength:

baseVal – der im Attribut festgelegte Grundwert, der sich lesen und ändern lässt.
animVal – der aktuelle, eventuell durch SMIL-Animation (<animate>) veränderte Wert. Er ist nur lesbar.

Die Eigenschaft selbst ist schreibgeschützt: Man kann svg.y kein neues Objekt zuweisen. Den Wert ändert man stattdessen über svg.y.baseVal.value, baseVal.valueAsString, baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute("y", …). Fehlt das Attribut, ist der Wert 0.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt, dessen baseVal den Attributwert und dessen animVal den aktuell animierten Wert als SVGLength enthält.

Beispiele

y-Position eines verschachtelten SVG auslesen

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

console.log(inner.y.baseVal.value);         // Wert in Benutzereinheiten
console.log(inner.y.baseVal.valueAsString); // Originaler Attributtext
console.log(inner.y.animVal.value);         // aktueller (animierter) Wert

40 "40" 40

Verschachteltes SVG vertikal verschieben

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

// Richtig: über baseVal ändern
inner.y.baseVal.value += 25;
console.log(inner.getAttribute("y"));

// Einheit explizit setzen (Prozent relativ zur Höhe des Viewports)
inner.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(inner.y.baseVal.valueAsString);

"65" "10%"

Einfache Animation mit requestAnimationFrame

const panel = document.querySelector("#inner");
const start = performance.now();

const tick = (now) => {
  const t = (now - start) / 1000;
  // Auf- und Abbewegung um ±30 Einheiten
  panel.y.baseVal.value = 50 + Math.sin(t * 2) * 30;
  if (t < 5) requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibgeschützt: svg.y = 10 hat keine Wirkung (im Strict Mode kommt ein TypeError). Ändern Sie stattdessen svg.y.baseVal.value.
Äußerstes SVG: Beim obersten <svg>-Element in HTML wird y ignoriert. Positionieren Sie es mit CSS.
Einheiten: baseVal.value liefert immer Benutzereinheiten. Bei Prozentangaben hängt das Ergebnis von der Größe des umgebenden Viewports ab. Das Element sollte deshalb im Dokument eingehängt und gerendert sein, sonst kann die Umrechnung ungenaue Werte liefern oder einen Fehler werfen.
animVal: Nur SMIL-Animationen verändern animVal. CSS-Animationen der Eigenschaft y (SVG 2) sind darin je nach Browser nicht enthalten. Den tatsächlich dargestellten Wert liefert getComputedStyle(el).y.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

SVGSVGElement.x SVGSVGElement.width SVGSVGElement.height SVGAnimatedLength SVGLength SVGSVGElement StorageEvent.key