SVGElement.ownerSVGElement — Eigenschaft · JavaScript-Referenz

Signatur

SVGElement.ownerSVGElement

Beschreibung

Die schreibgeschützte Eigenschaft ownerSVGElement gibt eine Referenz auf das nächstgelegene Vorfahren-Element vom Typ SVGSVGElement zurück. Für ein <circle> innerhalb eines <svg> ist das also genau dieses <svg>. Bei verschachtelten <svg>-Elementen wird das innerste umschließende zurückgegeben, nicht das äußerste.

Nützlich ist die Eigenschaft immer dann, wenn man von einem beliebigen Grafikelement aus Methoden des Wurzel-Viewports braucht – etwa createSVGPoint(), createSVGMatrix(), getScreenCTM() für Koordinatenumrechnungen oder viewBox-Informationen. Gerade in Event-Handlern (z. B. bei Drag & Drop) spart das das manuelle Hochlaufen im DOM mit closest('svg').

Ist das Element selbst das äußerste <svg>-Element, liefert die Eigenschaft null. Ebenfalls null ergibt sich, wenn das Element (noch) nicht in einem <svg> hängt, z. B. direkt nach document.createElementNS().

Rückgabewert

Typ

SVGSVGElement | null

Beschreibung

Das nächstgelegene übergeordnete <svg>-Element oder null, wenn das Element das äußerste <svg> ist bzw. keinen <svg>-Vorfahren besitzt.

Beispiele

Umschließendes svg-Element ermitteln

// HTML: <svg id="aussen"><svg id="innen"><circle id="kreis" r="10"/></svg></svg>
const kreis = document.getElementById('kreis');
const innen = document.getElementById('innen');
const aussen = document.getElementById('aussen');

console.log(kreis.ownerSVGElement.id);  // nächstes <svg>
console.log(innen.ownerSVGElement.id);
console.log(aussen.ownerSVGElement);    // äußerstes <svg>

innen aussen null

Mausposition in SVG-Koordinaten umrechnen

// Klick auf ein beliebiges Element innerhalb der Grafik
const rect = document.querySelector('svg rect');

rect.addEventListener('click', (event) => {
  const svg = rect.ownerSVGElement;
  const pt = svg.createSVGPoint();
  pt.x = event.clientX;
  pt.y = event.clientY;
  // Bildschirm- in Benutzerkoordinaten des <svg> umrechnen
  const lokal = pt.matrixTransform(svg.getScreenCTM().inverse());
  console.log(`SVG-Koordinate: ${lokal.x.toFixed(1)}, ${lokal.y.toFixed(1)}`);
});

SVG-Koordinate: 42.0, 17.5

Dynamisch erzeugte Elemente: vor und nach dem Einfügen

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

console.log(line.ownerSVGElement);          // noch nicht eingehängt
svg.append(line);
console.log(line.ownerSVGElement === svg);

null true

// Wichtig · Fallstricke

Nicht das Wurzel-Element: Bei verschachtelten <svg>-Elementen liefert die Eigenschaft das nächste, nicht das äußerste. Für das äußerste Element muss man in einer Schleife hochlaufen, bis ownerSVGElement null ist.
Das äußerste <svg> gibt immer null zurück – vor dem Zugriff auf Methoden wie createSVGPoint() prüfen, z. B. mit el.ownerSVGElement ?? el.
Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode TypeError).
Nur auf SVGElement-Instanzen verfügbar. HTML-Elemente in <foreignObject> besitzen sie nicht – dort closest('svg') verwenden.
createSVGPoint() gilt als veraltet; moderne Alternative ist new DOMPoint(). ownerSVGElement selbst wird von allen aktuellen Browsern unterstützt.

Siehe auch

SVGElement SVGElement.viewportElement SVGSVGElement SVGGraphicsElement.getScreenCTM() Element.closest() Node.ownerDocument StorageEvent.storageArea