Signatur
interface SVGTextPositioningElement extends SVGTextContentElement
Beschreibung
SVGTextPositioningElement ist eine abstrakte Schnittstelle, die du nicht direkt instanziierst. Sie wird von SVGTextElement (<text>) und SVGTSpanElement (<tspan>) implementiert und erbt ihrerseits von SVGTextContentElement, SVGGraphicsElement, SVGElement und schließlich Element.
Die Schnittstelle stellt fünf schreibgeschützte Eigenschaften bereit, die die Positionierungsattribute als animierbare Listen abbilden:
x:SVGAnimatedLengthList, absolute x-Koordinaten der einzelnen Glypheny:SVGAnimatedLengthList, absolute y-Koordinatendx:SVGAnimatedLengthList, relative Verschiebung in x-Richtungdy:SVGAnimatedLengthList, relative Verschiebung in y-Richtungrotate:SVGAnimatedNumberList, Drehwinkel in Grad pro Glyphe
Jede dieser Eigenschaften hat einen baseVal (den Wert aus dem Attribut, veränderbar) und einen animVal (den aktuellen, ggf. durch SMIL animierten Wert, schreibgeschützt). Über baseVal kannst du Listen typsicher lesen und bearbeiten, statt Attribut-Strings mit getAttribute()/setAttribute() selbst zu zerlegen und neu zusammenzusetzen.
Praktisch nutzt du die Schnittstelle vor allem, wenn du Text zeichenweise positionierst: für Wellen- oder Bogeneffekte, für Diagrammbeschriftungen, die pixelgenau sitzen müssen, oder für Animationen, bei denen einzelne Buchstaben verschoben oder gedreht werden.
Rückgabewert
Typ
SVGTextPositioningElement
Beschreibung
Abstrakte Schnittstelle. Du erhältst Instanzen über
document.createElementNS() oder DOM-Abfragen auf <text>- bzw. <tspan>-Elemente.Beispiele
Positionslisten eines <text>-Elements auslesen
// HTML: <svg id="chart" width="200" height="60"><text id="label" x="10 20 30" y="40" rotate="0 15 30">ABC</text></svg>
const label = document.getElementById('label');
console.log(label instanceof SVGTextPositioningElement);
const xList = label.x.baseVal;
console.log(xList.numberOfItems);
console.log([...Array(xList.numberOfItems)].map((_, i) => xList.getItem(i).value));
const rot = label.rotate.baseVal;
console.log(rot.getItem(2).value);true
3
[10, 20, 30]
30
Element erzeugen und Glyphen zeichenweise positionieren (Welleneffekt)
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '80');
document.body.append(svg);
const text = document.createElementNS(SVG_NS, 'text');
const content = 'Welle!';
text.textContent = content;
svg.append(text);
// Für jedes Zeichen eine x- und y-Koordinate anhängen
[...content].forEach((_, i) => {
const x = svg.createSVGLength();
x.value = 20 + i * 25;
text.x.baseVal.appendItem(x);
const y = svg.createSVGLength();
y.value = 40 + Math.sin(i) * 15;
text.y.baseVal.appendItem(y);
});
console.log(text.getAttribute('x'));20 45 70 95 120 145
Einzelne Buchstaben über rotate animieren
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const tspan = document.createElementNS(SVG_NS, 'tspan');
tspan.textContent = 'Dreh';
document.querySelector('text').append(tspan);
const rotList = tspan.rotate.baseVal;
const angles = [...tspan.textContent].map(() => {
const n = svg.createSVGNumber();
rotList.appendItem(n);
return n;
});
const animate = (t) => {
angles.forEach((n, i) => {
n.value = Math.sin(t / 300 + i) * 25;
});
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);Relative Verschiebung mit dy zurücksetzen
const tspan = document.querySelector('tspan');
// Alle dy-Werte entfernen – Text sitzt wieder auf der Grundlinie
tspan.dy.baseVal.clear();
console.log(tspan.dy.baseVal.numberOfItems);
console.log(tspan.getAttribute('dy'));0
(leerer String oder null, je nach Browser)
// Wichtig · Fallstricke
- Abstrakte Schnittstelle:
new SVGTextPositioningElement()wirft einenTypeError. Erzeuge Elemente immer mitdocument.createElementNS('http://www.w3.org/2000/svg', 'text')–document.createElement('text')erzeugt nur ein unbekanntes HTML-Element ohne diese Eigenschaften. - Nur
baseValist veränderbar:animValist schreibgeschützt. Die Eigenschaftenx,yusw. selbst lassen sich nicht neu zuweisen (text.x = ...bleibt wirkungslos). appendItem()verschiebt Objekte: Hängst du einSVGLengthan, das schon zu einer anderen Liste gehört, wird es laut Spezifikation dort entfernt (in SVG 2 wird stattdessen eine Kopie eingefügt). Lege daher pro Eintrag mitcreateSVGLength()bzw.createSVGNumber()ein neues Objekt an.- Weniger Werte als Zeichen: Bei
x/y/dx/dybehalten die übrigen Zeichen den normalen Textfluss. Beirotategilt der letzte Wert für alle folgenden Zeichen. - Einheiten:
SVGLength.valueliefert immer Benutzereinheiten (px). Für Prozent- oderem-Angaben nutzt duvalueInSpecifiedUnitsbzw.newValueSpecifiedUnits(). - Kompatibilität: Wird in allen modernen Browsern unterstützt. Das frühere
<tref>(SVGTRefElement) ist aus SVG 2 entfernt und wird von Browsern nicht mehr unterstützt. Für Performance bei vielen Zeichen solltest du Listen-Änderungen bündeln, da jede Änderung Layout neu auslöst.