SVGAElement.href — Eigenschaft · JavaScript-Referenz

Signatur

get SVGAElement.href

Beschreibung

Die Eigenschaft href eines SVGAElement (also eines <a>-Elements innerhalb von SVG) liefert keinen einfachen String wie bei HTMLAnchorElement.href, sondern ein SVGAnimatedString-Objekt. Es besitzt zwei Unter-Eigenschaften: baseVal (der im Attribut gesetzte Wert, les- und schreibbar) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert, nur lesbar).

Der Wert spiegelt das Attribut href wider. Fehlt dieses, greifen Browser auf das veraltete xlink:href aus dem Namensraum http://www.w3.org/1999/xlink zurück. Ist href gesetzt, hat es Vorrang vor xlink:href.

Die Eigenschaft selbst ist schreibgeschützt – das Objekt kann nicht ersetzt werden. Um das Linkziel zu ändern, schreibt man in href.baseVal oder verwendet setAttribute("href", …). Typische Einsätze sind das dynamische Umschreiben von Links in interaktiven Diagrammen, Karten oder Infografiken.

Wichtig: baseVal enthält den Attributwert unverändert, also z. B. eine relative URL. Eine absolute URL erhält man erst über new URL(a.href.baseVal, document.baseURI).

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (Attributwert als string, schreibbar) und animVal (animierter Wert, nur lesbar).

Beispiele

Linkziel eines SVG-Links auslesen

// <svg><a id="link" href="/produkte"><text x="10" y="20">Produkte</text></a></svg>
const link = document.querySelector('#link');

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

true /produkte /produkte

Linkziel dynamisch ändern

const link = document.querySelector('svg a');

// Nicht: link.href = '...' (wirkungslos bzw. TypeError im Strict Mode)
link.href.baseVal = 'https://example.com/details';

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

https://example.com/details

Absolute URL ermitteln und externe Links markieren

const svgLinks = document.querySelectorAll('svg a');

for (const a of svgLinks) {
  const url = new URL(a.href.baseVal, document.baseURI);
  if (url.origin !== location.origin) {
    a.setAttribute('target', '_blank');
    a.setAttribute('rel', 'noopener noreferrer');
  }
  console.log(url.href);
}

https://www.example.org/seite https://extern.example.com/

Fallback auf xlink:href bei altem SVG

const XLINK = 'http://www.w3.org/1999/xlink';
const a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
a.setAttributeNS(XLINK, 'xlink:href', '#abschnitt-2');

// href-Attribut fehlt, daher wird xlink:href gespiegelt
console.log(a.href.baseVal);

#abschnitt-2

// Wichtig · Fallstricke

Kein String: Anders als bei HTMLAnchorElement.href liefert String(a.href) nur "[object SVGAnimatedString]". Verwenden Sie immer a.href.baseVal.
Schreibgeschützt: Eine Zuweisung an a.href wird ignoriert (im Strict Mode TypeError). Ändern Sie stattdessen baseVal.
Keine Auflösung: baseVal ist die rohe, evtl. relative URL. Es gibt keine Eigenschaften wie pathname oder host; nutzen Sie dazu URL.
xlink:href ist veraltet: In neuem Code nur href verwenden. Sind beide gesetzt, gewinnt href. Ältere Safari-Versionen (vor 12) werteten nur xlink:href aus.
Sicherheit: Setzen Sie keine ungeprüften Nutzereingaben als baseVal – javascript:-URLs in SVG-Links ermöglichen XSS. Protokoll vorher mit new URL() prüfen.

Siehe auch

SVGAElement SVGAnimatedString SVGAElement.target HTMLAnchorElement.href Element.setAttribute() MathMLAnchorElement.target