SVGElement.dataset — Eigenschaft · JavaScript-Referenz

Signatur

get SVGElement.dataset

Beschreibung

Die schreibgeschützte Eigenschaft dataset des Interfaces SVGElement gibt ein DOMStringMap-Objekt zurück. Es spiegelt alle data-*-Attribute des Elements wider. Sie funktioniert genauso wie HTMLElement.dataset, ist aber für SVG-Elemente wie <circle>, <rect>, <path> oder <g> gedacht.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann dataset kein neues Objekt zuweisen. Die einzelnen Einträge lassen sich aber frei lesen, schreiben und mit delete entfernen. Jede Änderung wirkt sich sofort auf die Attribute im DOM aus und umgekehrt.

Bei den Namen gilt eine feste Umwandlung: Aus data-chart-value wird der Schlüssel chartValue (kebab-case wird zu camelCase). In der Gegenrichtung erzeugt dataset.seriesIndex = 2 das Attribut data-series-index="2". Alle Werte werden als Strings gespeichert.

Typische Einsatzfälle sind Diagramme und Visualisierungen, bei denen man Metadaten (IDs, Messwerte, Kategorien) direkt an SVG-Formen hängt. So kann man sie später in Event-Handlern, Tooltips oder CSS-Selektoren wie [data-state="active"] auswerten.

Rückgabewert

Typ

DOMStringMap

Beschreibung

Ein Live-Objekt mit allen data-*-Attributen des Elements. Die Schlüssel stehen in camelCase, die Werte sind immer vom Typ string.

Beispiele

data-Attribute eines SVG-Kreises lesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.innerHTML = '<circle cx="50" cy="50" r="20" data-city="Berlin" data-population-mio="3.7" />';
document.body.append(svg);

const circle = svg.querySelector('circle');
console.log(circle.dataset.city);
console.log(circle.dataset.populationMio);
console.log(typeof circle.dataset.populationMio);

Berlin 3.7 string

Werte setzen und löschen

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

// Setzen: camelCase wird zu kebab-case
rect.dataset.seriesIndex = 2;
rect.dataset.state = 'active';
console.log(rect.getAttribute('data-series-index'));
console.log(rect.outerHTML);

// Löschen
delete rect.dataset.state;
console.log('state' in rect.dataset);

2 <rect data-series-index="2" data-state="active"></rect> false

Tooltip für ein Balkendiagramm per Event-Delegation

const NS = 'http://www.w3.org/2000/svg';
const chart = document.createElementNS(NS, 'svg');
const werte = [
  { monat: 'Jan', umsatz: 120 },
  { monat: 'Feb', umsatz: 180 },
  { monat: 'Mär', umsatz: 90 }
];

werte.forEach(({ monat, umsatz }, i) => {
  const bar = document.createElementNS(NS, 'rect');
  bar.setAttribute('x', i * 30);
  bar.setAttribute('y', 200 - umsatz);
  bar.setAttribute('width', 25);
  bar.setAttribute('height', umsatz);
  Object.assign(bar.dataset, { monat, umsatz });
  chart.append(bar);
});
document.body.append(chart);

chart.addEventListener('click', (event) => {
  const bar = event.target.closest('rect');
  if (!bar) return;
  const umsatz = Number(bar.dataset.umsatz); // String in Zahl umwandeln
  console.log(`${bar.dataset.monat}: ${umsatz.toLocaleString('de-DE')} €`);
});

Feb: 180 € (beim Klick auf den zweiten Balken)

Alle data-Attribute durchlaufen

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.dataset.layer = 'strassen';
path.dataset.zoomMin = '12';

for (const [key, value] of Object.entries(path.dataset)) {
  console.log(`${key} = ${value}`);
}

layer = strassen zoomMin = 12

// Wichtig · Fallstricke

Nur Strings: Zahlen, Booleans oder Objekte werden beim Setzen in Strings umgewandelt (true → "true", Objekte → "[object Object]"). Zum Lesen muss man selbst umwandeln (Number(), JSON.parse()).
Namenskonvertierung: Setzt man einen Schlüssel mit Bindestrich direkt nach einem Kleinbuchstaben, etwa dataset['a-b'] = 1, wirft der Browser einen SyntaxError. Großbuchstaben in Attributnamen werden zu Kleinbuchstaben: data-Foo ist über dataset.foo erreichbar.
Nicht zuweisbar: el.dataset = {...} hat keine Wirkung und wirft im Strict Mode einen TypeError. Mehrere Werte setzt man deshalb mit Object.assign(el.dataset, {...}).
Namespace: Nur Elemente, die mit createElementNS('http://www.w3.org/2000/svg', …) oder per SVG-Markup entstehen, sind echte SVGElement-Instanzen. Mit document.createElement('circle') entsteht dagegen ein HTMLUnknownElement.
Kompatibilität: Ältere Browser, darunter Internet Explorer und Safari vor Version 10.1, kennen dataset auf SVG-Elementen nicht. Dort funktioniert getAttribute('data-…') bzw. setAttribute() weiterhin.
Sicherheit: Werte aus dataset können vom Benutzer stammen. Man sollte sie nie ungeprüft in innerHTML einsetzen, sondern textContent verwenden.

Siehe auch

HTMLTrackElement.default SVGElement.style SVGElement.nonce SVGElement.tabIndex SVGElement.autofocus