SVGTextContentElement.getEndPositionOfChar() — Methode · JavaScript-Referenz

Signatur

SVGTextContentElement.prototype.getEndPositionOfChar(index)

Beschreibung

Die Methode getEndPositionOfChar() der Schnittstelle SVGTextContentElement liefert den Punkt, an dem ein bestimmtes Zeichen nach dem Textlayout endet. Diesen Punkt nennt man auch „Advance-Punkt“. Gemeint ist die Position, an der das nächste Zeichen beginnen würde: bei horizontalem Text also die x-Koordinate plus die Vorschubbreite des Zeichens, jeweils auf der Grundlinie (Baseline).

Die Koordinaten liegen im Benutzerkoordinatensystem des Textelements. Die Methode berücksichtigt alles, was das Layout beeinflusst: x, y, dx, dy, rotate, letter-spacing, textLength und auch den Verlauf entlang eines <textPath>.

Typische Einsatzfälle sind Cursor- und Markierungsanzeigen in SVG-Texteditoren, das Anhängen grafischer Elemente direkt hinter ein bestimmtes Wort, Unterstreichungen oder Hervorhebungen einzelner Zeichen und die Kollisionsprüfung bei Beschriftungen. Zusammen mit getStartPositionOfChar() lässt sich Anfang und Ende jedes Zeichens exakt bestimmen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Index des Zeichens, beginnend bei `0`. Er zählt in UTF-16-Codeeinheiten innerhalb des Textinhalts des Elements (inklusive untergeordneter `<tspan>`-Elemente).

Rückgabewert

Typ

DOMPoint

Beschreibung

Ein DOMPoint (in älteren Implementierungen SVGPoint) mit den Eigenschaften x und y. Er gibt die Endposition des Zeichens auf der Grundlinie im Benutzerkoordinatensystem an.

Beispiele

Endposition eines Zeichens auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '50');
text.textContent = 'Hallo SVG';
svg.append(text);
document.body.append(svg); // Layout ist erst im DOM verfügbar

const end = text.getEndPositionOfChar(4); // Ende von "o"
console.log(`x=${end.x.toFixed(1)}, y=${end.y}`);

x=46.7, y=50 (x hängt von Schriftart und -größe ab)

Marker direkt hinter ein Wort setzen

// <svg id="s"><text id="t" x="20" y="40">Neu: Angebot</text></svg>
const text = document.querySelector('#t');
const word = 'Neu';
const idx = text.textContent.indexOf(word) + word.length - 1;
const { x, y } = text.getEndPositionOfChar(idx);

const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
dot.setAttribute('cx', x + 3);
dot.setAttribute('cy', y - 12);
dot.setAttribute('r', 3);
dot.setAttribute('fill', 'crimson');
text.after(dot);

Zeichenbreiten aus Start- und Endposition berechnen

const text = document.querySelector('text');
const n = text.getNumberOfChars();

const widths = Array.from({ length: n }, (_, i) => {
  const start = text.getStartPositionOfChar(i);
  const end = text.getEndPositionOfChar(i);
  return Math.hypot(end.x - start.x, end.y - start.y);
});
console.log(widths.map(w => w.toFixed(1)).join(', '));

z. B. "8.7, 6.7, 3.1, 3.1, 7.3"

// Wichtig · Fallstricke

Ist index negativ oder größer als getNumberOfChars() - 1, wirft die Methode eine DOMException vom Typ IndexSizeError. Prüfe den Index also vorher.
Das Element muss gerendert werden. Ist es nicht im DOM, hat es display: none oder ist die Schrift noch nicht geladen, sind die Werte falsch oder es wird eine Ausnahme geworfen. Bei Web-Fonts vorher auf await document.fonts.ready warten.
Der Index zählt UTF-16-Codeeinheiten. Emojis und Zeichen außerhalb der BMP belegen zwei Indizes, Ligaturen können mehrere Indizes auf dieselbe Glyphe abbilden.
Die Koordinaten liegen im lokalen Benutzerkoordinatensystem. Transformationen der Elternelemente sind nicht eingerechnet. Für Bildschirmkoordinaten musst du den Punkt mit getScreenCTM() umrechnen: point.matrixTransform(el.getScreenCTM()).
Bei rotierten Zeichen (rotate) oder Text auf Pfaden ist die Differenz zur Startposition nicht rein horizontal. Nutze deshalb Math.hypot statt einer einfachen x-Differenz.
Ältere Browser liefern ein SVGPoint statt eines DOMPoint. Die Eigenschaften x/y sind in beiden Fällen gleich. Die Methode wird in allen modernen Browsern unterstützt.

Siehe auch

SVGTextContentElement.getStartPositionOfChar() SVGTextContentElement.getExtentOfChar() SVGTextContentElement.getNumberOfChars() SVGTextContentElement.getSubStringLength() SVGTextContentElement.getCharNumAtPosition() SVGTextContentElement DOMPoint