SVGAElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAElement extends SVGGraphicsElement

Beschreibung

SVGAElement steht für ein <a>-Element im SVG-Namensraum (http://www.w3.org/2000/svg). Es funktioniert wie ein Hyperlink: Beliebige SVG-Grafikelemente wie Formen, Texte oder Gruppen, die darin liegen, werden anklickbar und führen zu einer URL. Die Schnittstelle erbt von SVGGraphicsElement und damit auch von SVGElement, Element, Node und EventTarget.

Die wichtigsten Eigenschaften:

href (SVGAnimatedString, aus SVGURIReference): Linkziel. Gelesen und geschrieben wird über href.baseVal, der aktuell animierte Wert steht in href.animVal.
target (SVGAnimatedString): Zielkontext wie _blank oder _self, ebenfalls über target.baseVal.
download, hreflang, ping, referrerPolicy, rel, type (jeweils string): spiegeln die gleichnamigen Attribute wider, genau wie bei HTMLAnchorElement.
relList (DOMTokenList): Die Werte von rel als Token-Liste, bequem zu bearbeiten mit add(), remove() und contains().

Du brauchst die Schnittstelle, wenn du Links in Inline-SVG dynamisch erzeugst oder änderst, zum Beispiel für interaktive Diagramme, Karten oder Infografiken mit klickbaren Bereichen. Wichtig: SVG-Elemente musst du mit document.createElementNS() und dem SVG-Namensraum anlegen. Mit createElement("a") bekommst du dagegen ein HTMLAnchorElement.

Rückgabewert

Typ

SVGAElement

Beschreibung

Wird zum Beispiel von document.createElementNS("http://www.w3.org/2000/svg", "a") oder von querySelector("svg a") zurückgegeben.

Beispiele

SVG-Link dynamisch erzeugen

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

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

const link = document.createElementNS(SVG_NS, 'a');
link.setAttribute('href', 'https://programmierung.net/');
link.setAttribute('target', '_blank');
link.relList.add('noopener', 'noreferrer');

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

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

console.log(link instanceof SVGAElement);
console.log(link.href.baseVal);
console.log(link.rel);

true https://programmierung.net/ noopener noreferrer

Linkziel und Fenster über SVGAnimatedString ändern

// <svg><a id="karte-link" href="/region/nord"><rect width="80" height="40"/></a></svg>
const link = document.querySelector('#karte-link');

console.log(typeof link.href);   // kein String!
console.log(link.href.baseVal);

link.href.baseVal = '/region/sued';
link.target.baseVal = '_self';

console.log(link.getAttribute('href'));
console.log(link.target.baseVal);

object /region/nord /region/sued _self

Klicks auf SVG-Links abfangen (z. B. für SPA-Routing)

const svg = document.querySelector('svg.diagramm');

svg.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  if (!(link instanceof SVGAElement)) return;

  const url = new URL(link.href.baseVal, location.href);
  if (url.origin === location.origin) {
    event.preventDefault();
    history.pushState({}, '', url.pathname);
    console.log('Navigiere intern zu', url.pathname);
  }
});

Navigiere intern zu /region/sued

Download-Link für eine Datei in SVG

const SVG_NS = 'http://www.w3.org/2000/svg';
const blob = new Blob(['Region;Wert\nNord;42\n'], { type: 'text/csv' });

const link = document.createElementNS(SVG_NS, 'a');
link.setAttribute('href', URL.createObjectURL(blob));
link.download = 'daten.csv';
link.type = 'text/csv';

const text = document.createElementNS(SVG_NS, 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.textContent = 'CSV herunterladen';
link.append(text);

document.querySelector('svg').append(link);
console.log(link.download);

daten.csv

// Wichtig · Fallstricke

href ist kein String: Anders als bei HTMLAnchorElement.href liefert SVGAElement.href ein SVGAnimatedString. Mit link.href = '...' änderst du nichts. Verwende link.href.baseVal oder setAttribute('href', ...). Außerdem wird der Wert nicht zu einer absoluten URL aufgelöst, bei Bedarf hilft new URL(link.href.baseVal, location.href). Für target gilt dasselbe.
Namensraum: document.createElement('a') erzeugt auch innerhalb von SVG immer ein HTML-Element, das im SVG weder angezeigt wird noch als Link funktioniert. Nimm immer createElementNS('http://www.w3.org/2000/svg', 'a'). In CSS und querySelector ist a zweideutig, grenze die Auswahl daher über den Kontext ein, zum Beispiel mit svg a.
xlink:href ist veraltet: Ältere SVG-Dateien nutzen xlink:href. Moderne Browser unterstützen das einfache href (SVG 2). Für sehr alte Umgebungen (z. B. Safari vor Version 12) kannst du zusätzlich setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url) setzen.
Sicherheit (XSS): Wie HTML-Links führen auch SVG-Links javascript:-URLs aus. Setze nie ungeprüfte Benutzereingaben als href. Prüfe das Protokoll (z. B. nur https: zulassen). Hochgeladene SVG-Dateien, die inline eingebunden werden, sind ein bekannter XSS-Weg. Bereinige sie vorher, etwa mit DOMPurify. Bei target="_blank" solltest du rel="noopener" setzen, auch wenn moderne Browser das inzwischen standardmäßig so behandeln.
Kompatibilität: Die Schnittstelle an sich und href/target funktionieren in allen Browsern. download, rel, relList, referrerPolicy, hreflang, type und ping kamen später hinzu und werden je nach Browser-Version unterschiedlich unterstützt. Prüfe vor der Nutzung, ob die Eigenschaft existiert ('relList' in link).
Links in einem SVG, das per <img> oder als CSS-Hintergrund eingebunden ist, sind nicht klickbar. Dafür muss das SVG inline oder per <object>/<iframe> eingebunden sein.

Siehe auch

SVGElement SVGGElement SVGMaskElement SVGPathElement SVGSVGElement SVGDescElement