SVGUseElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGUseElement.y

Beschreibung

Die Eigenschaft y des SVGUseElement-Interfaces spiegelt das Attribut y eines <use>-Elements wider. Sie gibt an, um wie viel das referenzierte Element (z. B. ein <symbol> oder ein beliebiges Element mit id) entlang der y-Achse verschoben wird. Intern wirkt der Wert wie eine zusätzliche Transformation translate(x, y).

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Der Wert lässt sich aber über das zurückgegebene SVGAnimatedLength ändern – genauer über y.baseVal, das ein veränderbares SVGLength ist. y.animVal enthält dagegen den aktuellen Wert inklusive laufender SMIL-Animationen und ist nur lesbar.

Typische Anwendungsfälle sind das dynamische Positionieren wiederverwendeter Icons oder Symbole per JavaScript, das Auslesen der Position in Pixeln (baseVal.value) oder das Umrechnen von Einheiten mit convertToSpecifiedUnits().

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (veränderbarer Basiswert aus dem Attribut) und animVal (aktueller, ggf. animierter Wert, nur lesbar). Fehlt das Attribut, ist der Wert 0.

Beispiele

y-Koordinate auslesen

// <svg><symbol id="stern" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5"/></symbol>
// <use id="icon" href="#stern" x="20" y="40" width="10" height="10"/></svg>
const use = document.getElementById('icon');

console.log(use.y.baseVal.value);          // Wert in Benutzereinheiten
console.log(use.y.baseVal.valueAsString);  // Wert als String
console.log(use.y.animVal.value);          // aktueller (ggf. animierter) Wert

40 "40" 40

Position per baseVal ändern

const use = document.querySelector('use#icon');

// Direkte Zuweisung an use.y ist nicht möglich – baseVal verwenden
use.y.baseVal.value = 100;
console.log(use.getAttribute('y'));

// Mit Einheit setzen
use.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(use.getAttribute('y'));

"100" "50%"

Symbole dynamisch untereinander anordnen

const svg = document.querySelector('svg');
const NS = 'http://www.w3.org/2000/svg';

for (let i = 0; i < 5; i++) {
  const use = document.createElementNS(NS, 'use');
  use.setAttribute('href', '#stern');
  use.setAttribute('width', '10');
  use.setAttribute('height', '10');
  use.x.baseVal.value = 10;
  use.y.baseVal.value = i * 15; // vertikaler Abstand 15
  svg.append(use);
}

const ys = [...svg.querySelectorAll('use')].map((u) => u.y.baseVal.value);
console.log(ys);

[0, 15, 30, 45, 60]

// Wichtig · Fallstricke

Schreibgeschützt: use.y = 50 hat keine Wirkung (im Strict Mode wirft es einen TypeError). Änderungen immer über use.y.baseVal oder setAttribute('y', …) vornehmen.
Relative Einheiten: Bei Prozentwerten oder em liefert baseVal.value den umgerechneten Wert in Benutzereinheiten; ist das Element nicht im gerenderten Dokument, kann die Umrechnung ungenau sein oder fehlschlagen.
Zusammenspiel mit transform: y wird als zusätzliche Verschiebung nach einem vorhandenen transform-Attribut angewendet – beide addieren sich.
animVal: Ist nur lesbar; in manchen Browsern spiegelt er CSS-Animationen nicht wider, nur SMIL.
In SVG 2 kann y auch als CSS-Eigenschaft gesetzt werden; CSS-Werte überschreiben das Attribut, baseVal zeigt aber weiterhin den Attributwert.
Kompatibilität: In allen modernen Browsern unterstützt.

Siehe auch

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