SVGTextElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGTextElement extends SVGTextPositioningElement

Beschreibung

SVGTextElement ist die DOM-Schnittstelle für <text>-Elemente in SVG-Grafiken. Sie hat selbst keine eigenen Eigenschaften oder Methoden. Alles, was sie kann, erbt sie über die Kette SVGTextPositioningElement → SVGTextContentElement → SVGGraphicsElement → SVGElement → Element.

Von SVGTextPositioningElement kommen die animierbaren Positionsattribute x, y, dx, dy (jeweils SVGAnimatedLengthList) und rotate (SVGAnimatedNumberList). Von SVGTextContentElement kommen die Textmetriken: textLength und lengthAdjust sowie die Methoden getComputedTextLength(), getNumberOfChars(), getSubStringLength(), getStartPositionOfChar(), getEndPositionOfChar(), getExtentOfChar(), getRotationOfChar() und getCharNumAtPosition(). SVGGraphicsElement steuert getBBox(), getCTM(), getScreenCTM() und transform bei.

Typische Einsatzfälle sind dynamisch erzeugte Beschriftungen in Diagrammen, das Messen der Textbreite für Hintergrundflächen oder Kürzungen mit „…“, und das Hervorheben einzelner Zeichen. Für Teiltexte mit eigener Formatierung setzt man darin <tspan>-Elemente (SVGTSpanElement) ein.

Wichtig: SVG-Elemente müssen mit document.createElementNS("http://www.w3.org/2000/svg", "text") erzeugt werden. Ein normales createElement("text") erzeugt ein unbekanntes HTML-Element, das nicht gezeichnet wird.

Rückgabewert

Typ

SVGTextElement

Beschreibung

Instanzen bekommt man über document.createElementNS(SVG_NS, "text") oder über DOM-Abfragen wie querySelector("text"). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Text-Element dynamisch erzeugen und positionieren

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("width", "300");
svg.setAttribute("height", "100");

const label = document.createElementNS(SVG_NS, "text");
label.setAttribute("x", "20");
label.setAttribute("y", "50");
label.setAttribute("font-size", "24");
label.textContent = "Umsatz 2024";

svg.append(label);
document.body.append(svg);

console.log(label instanceof SVGTextElement);
console.log(label.x.baseVal.getItem(0).value);

true 20

Textbreite messen und Hintergrund-Rechteck anpassen

const SVG_NS = "http://www.w3.org/2000/svg";
const text = document.querySelector("svg text");

// Funktioniert erst, wenn das Element im Dokument steht und gerendert wird
const box = text.getBBox();
const rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", box.x - 4);
rect.setAttribute("y", box.y - 2);
rect.setAttribute("width", box.width + 8);
rect.setAttribute("height", box.height + 4);
rect.setAttribute("fill", "#ffe08a");

// Rechteck hinter den Text legen
text.before(rect);
console.log(`Textbreite: ${text.getComputedTextLength().toFixed(1)} px`);

Textbreite: 142.3 px

Zu lange Beschriftung mit Auslassungspunkten kürzen

const truncateSvgText = (textEl, maxWidth) => {
  const full = textEl.textContent;
  if (textEl.getComputedTextLength() <= maxWidth) return;

  let len = full.length;
  while (len > 0) {
    textEl.textContent = full.slice(0, len) + "…";
    if (textEl.getComputedTextLength() <= maxWidth) break;
    len--;
  }
  // Volltext als Tooltip erhalten
  const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
  title.textContent = full;
  textEl.append(title);
};

truncateSvgText(document.querySelector("#achsen-label"), 120);

Zeichen unter dem Mauszeiger ermitteln

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

text.addEventListener("mousemove", (event) => {
  // Bildschirmkoordinaten in SVG-Koordinaten umrechnen
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(text.getScreenCTM().inverse());
  const index = text.getCharNumAtPosition(pt);
  if (index >= 0) {
    console.log(`Zeichen ${index}: "${text.textContent[index]}"`);
  }
});

Zeichen 3: "s"

// Wichtig · Fallstricke

Namensraum: Ohne createElementNS mit dem SVG-Namensraum entsteht kein SVGTextElement, und der Text wird nicht angezeigt.
Messungen brauchen ein gerendertes Element: getBBox(), getComputedTextLength() und die Zeichenmethoden liefern 0 oder werfen einen Fehler, solange das Element nicht im Dokument steht oder per display: none ausgeblendet ist. Webfonts sollten vorher geladen sein (await document.fonts.ready), sonst misst man mit der Ersatzschrift.
Kein automatischer Zeilenumbruch: SVG-Text bricht nicht um. Mehrzeiliger Text braucht mehrere <tspan>-Elemente mit x und dy oder ein <foreignObject> mit HTML.
Listen statt Einzelwerte: x, y, dx, dy sind SVGAnimatedLengthList. Den ersten Wert erreicht man über .baseVal.getItem(0).value. Für einfache Fälle ist setAttribute meist bequemer.
getCharNumAtPosition() erwartet in modernen Browsern ein DOMPointInit. Das veraltete SVGPoint über svg.createSVGPoint() funktioniert aber weiterhin. selectSubString() gilt als veraltet und wird nicht einheitlich unterstützt.
Sicherheit: Nutzereingaben immer über textContent setzen und nie über innerHTML, sonst droht XSS über eingeschleustes SVG oder Skripte.

Siehe auch

SVGRectElement SVGSetElement SVGDefsElement SVGDescElement SVGAElement