SVGTextPositioningElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPositioningElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGTextPositioningElement gibt das x-Attribut von <text>- und <tspan>-Elementen zurück. Diese Elemente erben von SVGTextPositioningElement. Der Rückgabewert ist ein SVGAnimatedLengthList-Objekt und keine einfache Zahl. Das Attribut kann nämlich mehrere Werte enthalten, etwa x="10 20 30". Jeder Wert legt dann die x-Koordinate eines einzelnen Zeichens fest.

Das Objekt hat zwei Eigenschaften:

baseVal: die im Attribut gesetzten Werte. Diese Liste kannst du ändern.
animVal: die aktuell wirksamen Werte, also inklusive einer laufenden SMIL-Animation. Diese Liste ist nur lesbar.

Beide sind vom Typ SVGLengthList. Jeder Eintrag ist ein SVGLength mit value (in Benutzereinheiten), valueInSpecifiedUnits und unitType.

Nutze x, wenn du Textpositionen per Skript auslesen oder präzise ändern willst, ohne Attributzeichenketten zu parsen. Das ist zum Beispiel für Diagrammbeschriftungen, eigene Zeichenabstände oder Animationen einzelner Buchstaben praktisch. Nur die Eigenschaft selbst ist schreibgeschützt. Die Liste in baseVal kannst du über Methoden wie appendItem(), clear() oder replaceItem() bearbeiten.

Rückgabewert

Typ

SVGAnimatedLengthList

Beschreibung

Ein Objekt mit den Listen baseVal (änderbar) und animVal (nur lesbar), beide vom Typ SVGLengthList. Die Listen enthalten die x-Koordinaten des Elements.

Beispiele

x-Koordinate eines Textes auslesen

// <svg><text id="label" x="25" y="40">Hallo</text></svg>
const text = document.getElementById('label');
const liste = text.x.baseVal;

console.log(liste.numberOfItems);
console.log(liste.getItem(0).value);

1 25

Mehrere Werte für einzelne Zeichen auslesen

// <text id="wort" x="10 30 50 70" y="50">SVG!</text>
const wort = document.getElementById('wort');
const { baseVal } = wort.x;

const werte = Array.from({ length: baseVal.numberOfItems }, (_, i) => baseVal.getItem(i).value);
console.log(werte);

[10, 30, 50, 70]

Position per Skript ändern

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

// Ersten Wert direkt ändern
text.x.baseVal.getItem(0).value = 100;
console.log(text.getAttribute('x'));

// Liste neu aufbauen: jedes Zeichen 15 Einheiten auseinander
const liste = text.x.baseVal;
liste.clear();
[0, 15, 30].forEach((pos) => {
  const len = svg.createSVGLength();
  len.value = pos;
  liste.appendItem(len);
});
console.log(text.getAttribute('x'));

100 0 15 30

Mit einer Prozentangabe arbeiten

// <svg width="400"><text id="t" x="50%" y="20">Mitte</text></svg>
const t = document.getElementById('t');
const len = t.x.baseVal.getItem(0);

console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);
console.log(len.value); // in Benutzereinheiten umgerechnet

true 50 200

// Wichtig · Fallstricke

Keine Zahl: text.x ist ein Objekt. text.x = 10 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen baseVal oder nutze setAttribute('x', …).
Leere Liste: Fehlt das Attribut x, ist baseVal.numberOfItems gleich 0. Dann wirft getItem(0) einen IndexSizeError. Prüfe die Länge also vorher.
animVal spiegelt nur SMIL-Animationen wider. CSS-Transformationen und die CSS-Eigenschaft x erscheinen dort nicht.
Nicht für alle Textelemente: <textPath> erbt nicht von SVGTextPositioningElement und hat daher keine Eigenschaft x.
Relative Einheiten: Bei Prozent oder em hängt SVGLength.value vom Viewport bzw. von der Schriftgröße ab. Das Ergebnis kann sich also ändern, wenn sich das Layout ändert.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Die Methoden getItem und numberOfItems gibt es überall. Eine Indexschreibweise wie baseVal[0] und die Eigenschaft length sind neuer. Verlass dich darauf nur, wenn deine Zielbrowser sie unterstützen.

Siehe auch

SVGTextPositioningElement.dx SVGTextPositioningElement.y SVGTextPositioningElement.dy SVGTextPositioningElement.rotate SVGFECompositeElement.x