SVGSVGElement.getElementById() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.getElementById(id)

Beschreibung

Die Methode getElementById() des SVGSVGElement-Interfaces durchsucht das SVG-Dokumentfragment, also alle Nachfahren des jeweiligen <svg>-Elements, nach einem Element, dessen id-Attribut exakt der übergebenen Zeichenkette entspricht. Gefunden wird immer das erste passende Element in Dokumentreihenfolge.

Anders als document.getElementById() ist die Suche auf den Teilbaum des SVG-Elements beschränkt. Das ist hilfreich, wenn eine Seite mehrere eingebettete SVG-Grafiken enthält (z. B. Icons oder Diagramme) und du gezielt Elemente innerhalb einer bestimmten Grafik ansprechen willst, etwa um Farben, Pfade oder Beschriftungen dynamisch zu ändern.

Wird kein passendes Element gefunden, liefert die Methode null. Da es sich um einen exakten Zeichenkettenvergleich handelt, wird Groß-/Kleinschreibung beachtet und kein CSS-Selektor ausgewertet – ein führendes # gehört also nicht in den Parameter.

Parameter

Name	Typ	Default	Beschreibung
$id Pflicht	string		Die gesuchte ID, ohne führendes `#`. Der Vergleich erfolgt exakt und unterscheidet Groß-/Kleinschreibung.

Rückgabewert

Typ

Element | null

Beschreibung

Das erste Nachfahren-Element mit passender id (meist ein SVGElement) oder null, wenn keines existiert.

Beispiele

Element innerhalb einer bestimmten SVG-Grafik finden

// <svg id="chart"><circle id="punkt" r="10" cx="20" cy="20"/></svg>
const svg = document.querySelector('svg#chart');
const kreis = svg.getElementById('punkt');

kreis.setAttribute('fill', 'tomato');
console.log(kreis.tagName);

circle

Gleiche IDs in mehreren Inline-SVGs gezielt ansprechen

// Zwei Icons mit identischer interner ID "pfad" (eigentlich ungültiges HTML, kommt aber in der Praxis vor)
const icons = document.querySelectorAll('svg.icon');

icons.forEach((svg, index) => {
  const pfad = svg.getElementById('pfad');
  if (pfad) {
    pfad.style.fill = index === 0 ? 'steelblue' : 'orange';
  }
});

Dynamisch erzeugtes SVG durchsuchen und auf null prüfen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const rect = document.createElementNS(NS, 'rect');
rect.id = 'balken';
svg.append(rect);
document.body.append(svg);

console.log(svg.getElementById('balken') === rect);
console.log(svg.getElementById('#balken'));

true null

// Wichtig · Fallstricke

Kein Selektor: getElementById('#id') findet nichts – für CSS-Selektoren svg.querySelector() verwenden.
Doppelte IDs: IDs sollten im gesamten Dokument eindeutig sein. Bei Inline-SVGs mit gleichen IDs (z. B. für <linearGradient>) können Verweise wie url(#id) auf das falsche Element zeigen, auch wenn getElementById() auf dem SVG richtig sucht.
Externe SVGs: Bei SVGs, die über <object> oder <iframe> eingebunden sind, zuerst über contentDocument auf das Dokument zugreifen (nur bei gleicher Herkunft). Bei <img>-SVGs ist kein DOM-Zugriff möglich.
Kompatibilität: Wird in allen modernen Browsern unterstützt. Ältere Browser kannten die Methode teils nicht; svg.querySelector('#id') ist ein sicherer Ersatz (bei IDs mit Sonderzeichen CSS.escape() nutzen).

Siehe auch

SVGSVGElement Document.getElementById() Element.querySelector() Document.createElementNS() Element.id SVGSVGElement.deselectAll()