Signatur
Beschreibung
getComputedTextLength() liefert die tatsächlich gerenderte Länge des Textes in einem SVG-Textelement wie <text>, <tspan> oder <textPath>. Der Wert ist die Summe der Vorschubbreiten (advance) aller Glyphen. Dabei zählen Schriftart, Schriftgröße, letter-spacing und word-spacing mit. Das Ergebnis steht in Benutzereinheiten (user units) des aktuellen Koordinatensystems.
Typische Einsatzfälle sind dynamische Layouts in SVG: Text kürzen, wenn er nicht in eine Box passt (Ellipse „…“), Hintergrundrechtecke oder Beschriftungen passend zur Textbreite zeichnen, Achsenbeschriftungen in Diagrammen ausrichten oder Text manuell umbrechen. SVG kennt nämlich keinen automatischen Zeilenumbruch.
Anders als getBBox() misst die Methode nur die Länge entlang der Schreibrichtung und keine Höhe. Transformationen wie transform oder scale gehen nicht ein, das Attribut textLength dagegen schon: Wenn es gesetzt ist, entspricht die berechnete Länge in der Regel diesem Wert. Für die natürliche, ungestreckte Länge ist deshalb dieses Attribut vorher zu entfernen.
Rückgabewert
0 zurück, wenn das Element leer ist oder nicht gerendert wird (z. B. bei display: none).Beispiele
Textbreite messen
const svg = document.querySelector('svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '30');
text.setAttribute('font-size', '16');
text.textContent = 'Hallo SVG';
svg.append(text); // muss im DOM sein, damit gemessen werden kann
const breite = text.getComputedTextLength();
console.log(`Textbreite: ${breite.toFixed(1)}`);Hintergrund-Label passend zur Textbreite
const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const erstelleLabel = (x, y, inhalt, padding = 6) => {
const g = document.createElementNS(NS, 'g');
const rect = document.createElementNS(NS, 'rect');
const text = document.createElementNS(NS, 'text');
text.setAttribute('x', x + padding);
text.setAttribute('y', y + 16);
text.textContent = inhalt;
g.append(rect, text);
svg.append(g);
const breite = text.getComputedTextLength();
Object.entries({ x, y, width: breite + 2 * padding, height: 22, rx: 4, fill: '#eef' })
.forEach(([k, v]) => rect.setAttribute(k, v));
return g;
};
erstelleLabel(20, 20, 'Umsatz 2024');Text mit Ellipse auf Maximalbreite kürzen
const kuerzeText = (textEl, maxBreite) => {
const original = textEl.textContent;
if (textEl.getComputedTextLength() <= maxBreite) return;
let ende = original.length;
while (ende > 0) {
textEl.textContent = original.slice(0, ende) + '…';
if (textEl.getComputedTextLength() <= maxBreite) break;
ende--;
}
textEl.setAttribute('aria-label', original); // vollständiger Text für Screenreader
};
const label = document.querySelector('#achsen-label');
kuerzeText(label, 120);
console.log(label.textContent);// Wichtig · Fallstricke
- Nur gerenderte Elemente: Das Element muss im DOM hängen und sichtbar sein. Bei
display: none, in einem ausgeblendeten Elternelement oder vor dem Einfügen ins Dokument ist das Ergebnis meist0. - Web-Fonts: Wird zu früh gemessen, bevor die Schrift geladen ist, ist der Wert falsch, weil noch die Ersatzschrift gilt. Deshalb vorher
await document.fonts.readyabwarten. - Transformationen:
transformoder einviewBox-Maßstab gehen nicht ein. Für Bildschirmpixel stattdessengetBoundingClientRect()verwenden. - Attribut
textLength: Ein gesetztestextLengthbeeinflusst das Ergebnis. Für die natürliche Breite das Attribut vorher entfernen. - Performance: Jeder Aufruf kann ein synchrones Layout erzwingen. In Schleifen (z. B. beim Kürzen) besser binär suchen oder
getSubStringLength()nutzen, statt den DOM-Inhalt ständig zu ändern. - Kompatibilität: Wird in allen modernen Browsern unterstützt. Die Werte können sich zwischen Browsern wegen unterschiedlicher Schriftdarstellung leicht unterscheiden.