SVGAElement.target — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.target

Beschreibung

Die Eigenschaft SVGAElement.target gehört zum Link-Element <a> innerhalb von SVG. Sie spiegelt das Attribut target wider. Dieses legt fest, in welchem Browsing-Kontext (Fenster, Tab, Frame) das verlinkte Dokument geöffnet wird. Übliche Werte sind _self, _blank, _parent, _top oder der Name eines Frames bzw. Fensters.

Anders als HTMLAnchorElement.target gibt die Eigenschaft keinen einfachen String zurück. Stattdessen erhältst du ein SVGAnimatedString-Objekt. Der eigentliche Attributwert steckt in target.baseVal, das du lesen und schreiben kannst. Der gerade animierte Wert steht in target.animVal, das nur lesbar ist. Die Eigenschaft target selbst ist schreibgeschützt. Eine Zuweisung wie link.target = "_blank" hat also keine Wirkung.

Brauchbar ist die Eigenschaft vor allem in interaktiven SVG-Grafiken wie Diagrammen, Karten oder Infografiken. Dort sollen Links zum Beispiel per Skript in einem neuen Tab geöffnet werden oder in einen bestimmten <iframe> laden.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (Attributwert, les- und schreibbar, string) und animVal (aktueller animierter Wert, nur lesbar, string). Fehlt das Attribut, sind beide Werte ein leerer String "".

Beispiele

Zielwert eines SVG-Links auslesen

// <svg><a id="mdn" href="https://developer.mozilla.org" target="_blank"><text x="10" y="20">MDN</text></a></svg>
const link = document.querySelector('svg a#mdn');

console.log(link.target instanceof SVGAnimatedString);
console.log(link.target.baseVal);
console.log(link.target.animVal);

true _blank _blank

Alle externen Links einer SVG-Grafik in neuem Tab öffnen

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

svg.querySelectorAll('a').forEach((link) => {
  const href = link.href.baseVal;
  const extern = /^https?:\/\//.test(href) && !href.startsWith(location.origin);
  if (extern) {
    link.target.baseVal = '_blank';               // setzt das Attribut target
    link.setAttribute('rel', 'noopener noreferrer'); // Schutz vor Tabnabbing
  }
});

console.log([...svg.querySelectorAll('a')].map((a) => a.target.baseVal));

["_blank", "", "_blank"]

Falle: direkte Zuweisung wirkt nicht

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

link.target = '_top';            // wird ignoriert (im Strict Mode: TypeError)
console.log(link.getAttribute('target'));

link.target.baseVal = '_top';    // richtig
console.log(link.getAttribute('target'));

null _top

Link in einen benannten iframe laden

// <iframe name="vorschau"></iframe>
const links = document.querySelectorAll('#diagramm a');

for (const link of links) {
  link.target.baseVal = 'vorschau';
}

console.log(links[0].target.baseVal);

vorschau

// Wichtig · Fallstricke

Schreibgeschützt: target selbst lässt sich nicht neu zuweisen. Ändere stattdessen target.baseVal oder nutze setAttribute('target', …). In ES-Modulen und im Strict Mode löst die direkte Zuweisung einen TypeError aus.
Sicherheit: Bei _blank setzen moderne Browser noopener automatisch. Für ältere Browser solltest du trotzdem rel="noopener noreferrer" ergänzen. Sonst kann die geöffnete Seite über window.opener die Ursprungsseite manipulieren (Tabnabbing).
Kontext: Wird die SVG-Datei per <img> oder als CSS-Hintergrund eingebunden, sind Links und Skripte deaktiviert. target wirkt nur bei Inline-SVG oder bei Einbindung über <object> bzw. <iframe>.
Das Attribut xlink:show aus SVG 1.1 ist veraltet. Verwende stattdessen target.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari).

Siehe auch

SVGAElement SVGAElement.href SVGAnimatedString HTMLAnchorElement.target Element.setAttribute() Window.open() IntersectionObserverEntry.target