SVGTitleElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGTitleElement extends SVGElement

Beschreibung

SVGTitleElement ist die DOM-Schnittstelle für das <title>-Element innerhalb von SVG-Dokumenten bzw. Inline-SVG. Das Element enthält eine kurze Klartext-Beschreibung seines Elternelements, also z. B. eines <svg>, <g>, <rect> oder <path>. Browser zeigen diesen Text meist als Tooltip an, wenn man mit der Maus über das Elternelement fährt. Screenreader nutzen ihn als zugänglichen Namen.

Eigene Eigenschaften oder Methoden hat die Schnittstelle nicht. Sie erbt alles von SVGElement, Element und Node. Den Inhalt liest oder setzt du deshalb in der Praxis über textContent. Da es sich um ein SVG-Element handelt, muss es mit document.createElementNS("http://www.w3.org/2000/svg", "title") erzeugt werden. Ein einfaches document.createElement("title") liefert stattdessen ein HTMLTitleElement.

Einsatzbereiche sind vor allem Barrierefreiheit (Icons, Diagramme, Infografiken) und einfache Tooltips für Datenpunkte in dynamisch erzeugten Diagrammen. Damit der Text zuverlässig erkannt wird, sollte das <title> das erste Kindelement seines Elternelements sein.

Rückgabewert

Typ

SVGTitleElement

Beschreibung

Ein Objekt dieser Schnittstelle bekommst du über document.createElementNS("http://www.w3.org/2000/svg", "title") oder über DOM-Abfragen wie querySelector("svg title").

Beispiele

Tooltip für einen Balken im Diagramm erzeugen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("viewBox", "0 0 100 50");

const rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("width", "40");
rect.setAttribute("height", "30");
rect.setAttribute("fill", "steelblue");

// title als erstes Kind des Rechtecks einfügen
const title = document.createElementNS(SVG_NS, "title");
title.textContent = "Umsatz Q1: 40.000 €";
rect.prepend(title);

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

console.log(title instanceof SVGTitleElement);

true

Vorhandenen Titel eines Icons lesen und ändern

// <svg id="icon-save" role="img"><title>Speichern</title>...</svg>
const titleEl = document.querySelector("#icon-save > title");

if (titleEl) {
  console.log(titleEl.textContent);
  titleEl.textContent = "Änderungen speichern";
  console.log(titleEl.textContent);
}

Speichern Änderungen speichern

Unterschied zu HTMLTitleElement

const htmlTitle = document.createElement("title");
const svgTitle = document.createElementNS("http://www.w3.org/2000/svg", "title");

console.log(htmlTitle.constructor.name);
console.log(svgTitle.constructor.name);
console.log(svgTitle.namespaceURI);

HTMLTitleElement SVGTitleElement http://www.w3.org/2000/svg

Barrierefreies Inline-SVG mit aria-labelledby

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("role", "img");

const title = document.createElementNS(SVG_NS, "title");
title.id = "chart-title";
title.textContent = "Besucherzahlen 2024";

svg.setAttribute("aria-labelledby", title.id);
svg.prepend(title);
document.body.append(svg);

console.log(svg.getAttribute("aria-labelledby"));

chart-title

// Wichtig · Fallstricke

Namespace beachten: document.createElement("title") erzeugt ein HTMLTitleElement, das innerhalb von SVG weder einen Tooltip noch einen zugänglichen Namen liefert. Verwende immer createElementNS mit dem SVG-Namespace.
Position: Das <title> sollte das erste Kind seines Elternelements sein. Manche Hilfstechnologien werten es sonst nicht aus.
Nur Klartext: Der Inhalt wird als reiner Text behandelt, Markup wird nicht gerendert. Nutze zum Setzen textContent statt innerHTML, damit keine ungewollten Knoten entstehen.
Kein title-Attribut: Anders als in HTML erzeugt das Attribut title="..." auf SVG-Elementen keinen verlässlichen Tooltip. Dafür ist das Kindelement gedacht.
Tooltips: Auf Touch-Geräten erscheinen sie nicht, und ihre Darstellung lässt sich nicht per CSS gestalten. Für interaktive Diagramme brauchst du deshalb oft eigene Tooltips. Das <title> solltest du trotzdem für die Barrierefreiheit behalten.
Kompatibilität: Die Schnittstelle wird von allen modernen Browsern unterstützt. Beim Einbinden über <img src="x.svg"> ist das SVG-DOM nicht per Skript erreichbar.

Siehe auch

SVGCircleElement SVGFETileElement SVGLineElement SVGStyleElement HTMLTitleElement