SVGElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGElement extends Element

Beschreibung

SVGElement ist die gemeinsame Basis aller DOM-Schnittstellen, die direkt einem Element der SVG-Sprache entsprechen, z. B. SVGSVGElement, SVGCircleElement, SVGPathElement oder SVGTextElement. Sie erbt von Element, Node und EventTarget. Außerdem bindet sie die Mixins GlobalEventHandlers, HTMLOrForeignElement und ElementCSSInlineStyle ein. Deshalb funktionieren style, dataset, tabIndex, focus(), blur() und alle on…-Ereignis-Eigenschaften genauso wie bei HTML-Elementen.

Wichtige eigene Eigenschaften sind:

ownerSVGElement: das nächste übergeordnete <svg>-Element, oder null beim äußersten <svg>.
viewportElement: das Element, das den Viewport festlegt.
className: ein SVGAnimatedString, kein einfacher String wie bei HTML.
dataset, style, tabIndex, nonce, autofocus.

Du brauchst die Schnittstelle vor allem dann, wenn du SVG-Grafiken dynamisch erzeugst oder änderst, etwa für Diagramme, Icons oder interaktive Karten. Außerdem ist sie praktisch für Typprüfungen wie el instanceof SVGElement, um SVG- und HTML-Knoten in Ereignis-Handlern auseinanderzuhalten. SVG-Elemente musst du immer im SVG-Namensraum http://www.w3.org/2000/svg anlegen, also mit document.createElementNS().

Rückgabewert

Typ

SVGElement

Beschreibung

Du kannst die Schnittstelle nicht direkt instanziieren. Instanzen entstehen über document.createElementNS('http://www.w3.org/2000/svg', name), durch den Parser oder über innerHTML in einem SVG-Kontext.

Beispiele

SVG-Element korrekt im Namensraum erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';

const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
svg.setAttribute('width', '200');

const circle = document.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('fill', 'tomato');

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

console.log(circle instanceof SVGElement);
console.log(circle.ownerSVGElement === svg);

true true

Fehler: createElement statt createElementNS

const falsch = document.createElement('circle');
console.log(falsch instanceof SVGElement); // HTMLUnknownElement

const richtig = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
console.log(richtig instanceof SVGElement);

false true

dataset, style und className.baseVal nutzen

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

rect.dataset.id = 'balken-3';
rect.style.fill = 'steelblue';

// className ist ein SVGAnimatedString
rect.className.baseVal = 'balken aktiv';
// Besser und einheitlich mit HTML: classList
rect.classList.add('hervorgehoben');

console.log(rect.dataset.id);
console.log(typeof rect.className);
console.log(rect.getAttribute('class'));

balken-3 object balken aktiv hervorgehoben

Interaktives Diagramm: Klick auf SVG-Elemente

const chart = document.querySelector('svg#chart');

const onClick = (event) => {
  const target = event.target;
  if (!(target instanceof SVGElement) || !target.dataset.wert) return;
  console.log(`Wert: ${target.dataset.wert}`);
};

chart.addEventListener('click', onClick);

// Tastaturbedienung ermöglichen
chart.querySelectorAll('rect').forEach((r) => {
  r.tabIndex = 0;
  r.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') r.dispatchEvent(new MouseEvent('click', { bubbles: true }));
  });
});

Wert: 42 (beim Klick auf ein <rect data-wert="42">)

// Wichtig · Fallstricke

Namensraum: document.createElement('circle') erzeugt ein HTMLUnknownElement, das nicht dargestellt wird. Verwende immer createElementNS mit http://www.w3.org/2000/svg.
className: Die Eigenschaft ist ein SVGAnimatedString. Code wie el.className.includes('x') schlägt daher fehl. Nutze stattdessen classList oder getAttribute('class').
Attribute vs. Eigenschaften: Geometrie-Eigenschaften wie circle.r sind animierte Objekte (SVGAnimatedLength). Den Wert setzt du über circle.r.baseVal.value = 20 oder einfacher mit setAttribute('r', '20').
Sicherheit: SVG kann <script>, Ereignis-Attribute (onload) und javascript:-Links in href enthalten. Nicht vertrauenswürdiges SVG darfst du nie per innerHTML einfügen. Bereinige es vorher (z. B. mit DOMPurify) oder binde es als <img src> ein. Dort werden keine Skripte ausgeführt.
Kompatibilität: Die Schnittstelle wird in allen modernen Browsern unterstützt. dataset, tabIndex und focus() auf SVG-Elementen gibt es erst in neueren Versionen. Sehr alte Browser (IE) kennen sie nicht.
Die Eigenschaft xmlbase und ähnliche SVG-1.1-Altlasten sind veraltet.

Siehe auch

Element SVGAElement SVGGElement SVGSVGElement SVGSetElement