SVGTextPositioningElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPositioningElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGTextPositioningElement gibt das y-Attribut eines SVGTextElement (<text>) oder SVGTSpanElement (<tspan>) als SVGAnimatedLengthList zurück. Das Attribut kann mehrere Werte enthalten (z. B. y="10 20 30"). Jeder Wert legt dann die absolute y-Position des jeweils nächsten Zeichens fest, sodass einzelne Buchstaben unterschiedlich hoch gesetzt werden können.

Das zurückgegebene Objekt hat zwei Listen: baseVal enthält den im Attribut hinterlegten Grundwert und kann verändert werden. animVal enthält den aktuell wirksamen Wert, also gegebenenfalls einen durch SMIL-Animation veränderten, und ist nur lesbar. Beide sind vom Typ SVGLengthList mit Einträgen vom Typ SVGLength.

Die Eigenschaft selbst ist schreibgeschützt. Man kann ihr also kein neues Objekt zuweisen. Die Liste in baseVal lässt sich aber mit appendItem(), replaceItem(), removeItem() oder clear() bearbeiten, und SVGLength-Werte lassen sich direkt ändern. Jede solche Änderung wird sofort in das y-Attribut im DOM übernommen.

Rückgabewert

Typ

SVGAnimatedLengthList

Beschreibung

Ein Objekt mit baseVal (veränderbare SVGLengthList) und animVal (nur lesbare, animierte SVGLengthList). Ist kein y-Attribut gesetzt, sind beide Listen leer.

Beispiele

y-Koordinaten eines Textes auslesen

// <svg><text id="label" x="10" y="20 30 40">ABC</text></svg>
const text = document.getElementById('label');
const list = text.y.baseVal;

const werte = [];
for (let i = 0; i < list.numberOfItems; i++) {
  werte.push(list.getItem(i).value);
}
console.log(werte);

[20, 30, 40]

Text vertikal verschieben

const text = document.querySelector('text');
const erstes = text.y.baseVal.getItem(0);

// Um 15 Benutzereinheiten nach unten verschieben
erstes.value += 15;
console.log(text.getAttribute('y'));

35 30 40

Wellen-Effekt: pro Buchstabe eine eigene y-Position

const svg = document.querySelector('svg');
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.textContent = 'Welle';
svg.querySelector('text').appendChild(tspan);

const liste = tspan.y.baseVal;
liste.clear();
[...tspan.textContent].forEach((_, i) => {
  const len = svg.createSVGLength();
  len.value = 50 + Math.sin(i) * 10;
  liste.appendItem(len);
});
console.log(liste.numberOfItems);

5

Wert in anderer Einheit abfragen

const len = document.querySelector('text').y.baseVal.getItem(0);
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 2);
console.log(len.valueAsString, len.value);

"2em" 32 // abhängig von der Schriftgröße

// Wichtig · Fallstricke

Nicht mit SVGRectElement.y verwechseln: Bei <rect> und ähnlichen Elementen ist y ein einzelner Wert vom Typ SVGAnimatedLength. Bei Textelementen ist es eine Liste, deshalb gibt es kein .baseVal.value. Einzelne Werte holt man mit getItem(i).
getItem() wirft einen IndexSizeError, wenn die Liste leer ist. Das passiert, wenn kein y-Attribut gesetzt ist. Vorher numberOfItems (bzw. length) prüfen.
text.y = … wird ignoriert, im Strict Mode gibt es einen TypeError. Ändern lässt sich nur baseVal, oder man nutzt setAttribute('y', …).
appendItem() mit einem SVGLength, das schon in einer anderen Liste steht, entfernt es dort. Für neue Werte ein frisches Objekt mit svgElement.createSVGLength() anlegen.
Die Werte in animVal ändern sich nur durch SMIL-Animationen, nicht durch CSS-Animationen.
Wird von allen modernen Browsern unterstützt. SVGLengthList.length ist erst in neueren Versionen verfügbar; numberOfItems funktioniert überall.

Siehe auch

SVGTextPositioningElement.x SVGTextPositioningElement.dy SVGTextPositioningElement.dx SVGTextPositioningElement.rotate SVGAnimatedLengthList SVGLengthList SVGTextElement SVGTSpanElement