Signatur
Beschreibung
Die Eigenschaft pathname eines SVGAElement gibt den Pfadanteil der Ziel-URL des Links als Zeichenkette zurück: Er beginnt mit einem Schrägstrich / und endet vor Suchanteil (?…) und Fragment (#…). Bei https://example.com/shop/artikel.html?id=5#bewertung ist der Wert also "/shop/artikel.html".
Die Eigenschaft gehört zu den URL-Zerlegungseigenschaften, die SVG 2 aus der HTML-Mixin-Schnittstelle HTMLHyperlinkElementUtils übernimmt. Sie funktioniert also genauso wie HTMLAnchorElement.pathname. Grundlage ist das Attribut href bzw. das ältere xlink:href. Relative Angaben werden gegen die Basis-URL des Dokuments aufgelöst.
Wenn du pathname setzt, wird das href-Attribut des Elements mit dem neuen Pfad neu geschrieben. Protokoll, Host, Suchanteil und Fragment bleiben dabei erhalten. Das eignet sich gut für interaktive SVG-Grafiken wie Karten oder Diagramme, deren Links du per Skript anpassen oder auswerten willst, etwa für Routing in einer Single-Page-App.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert (beim Setzen) | string | Neuer Pfad, z. B. "/produkte/neu". Fehlt der führende /, wird er ergänzt. Sonderzeichen werden prozentkodiert. |
Rückgabewert
/. Ist href leer oder ungültig, erhältst du eine leere Zeichenkette "".Beispiele
Pfad eines SVG-Links auslesen (mit Rückfalllösung)
// <svg><a id="link" href="https://example.com/shop/artikel.html?id=5#bewertung"><text y="20">Artikel</text></a></svg>
const link = document.querySelector('#link');
const getPathname = (a) => {
if (typeof a.pathname === 'string') return a.pathname;
// Rückfalllösung für Browser ohne Unterstützung
const href = a.href?.baseVal ?? a.getAttribute('href') ?? '';
return new URL(href, document.baseURI).pathname;
};
console.log(getPathname(link));Pfad setzen, Suchanteil und Fragment bleiben erhalten
const link = document.querySelector('svg a');
link.setAttribute('href', 'https://example.com/alt/seite?lang=de#top');
if ('pathname' in link) {
link.pathname = '/neu/seite';
} else {
const url = new URL(link.getAttribute('href'), document.baseURI);
url.pathname = '/neu/seite';
link.setAttribute('href', url.href);
}
console.log(link.getAttribute('href'));Clientseitiges Routing für Klicks in einer SVG-Karte
const karte = document.querySelector('#karte');
karte.addEventListener('click', (event) => {
const a = event.target.closest('a');
if (!a) return;
const href = a.href?.baseVal ?? a.getAttribute('href');
const url = new URL(href, document.baseURI);
// Nur interne Links selbst behandeln
if (url.origin === location.origin && url.pathname.startsWith('/region/')) {
event.preventDefault();
history.pushState({}, '', url.pathname + url.search);
console.log('Lade Region:', url.pathname.split('/')[2]);
}
});// Wichtig · Fallstricke
- Browser-Kompatibilität: Die URL-Zerlegungseigenschaften von
SVGAElement(pathname,host,searchusw.) sind neu in SVG 2 und in vielen Browsern gar nicht oder nur teilweise umgesetzt. Prüfe vorher mit'pathname' in element, ob die Eigenschaft vorhanden ist, und nutze sonstnew URL(...)als Rückfalllösung. - Anders als bei HTML ist
SVGAElement.hrefkeine Zeichenkette, sondern einSVGAnimatedString. Die URL steckt inhref.baseValbzw.href.animVal. - Relative Pfade werden gegen
document.baseURIaufgelöst. Bei eingebetteten SVG-Dateien (<object>,<iframe>) ist das die URL der SVG-Datei, nicht die der einbettenden Seite. - Der Wert ist prozentkodiert: Aus Leerzeichen wird
%20. Zum Anzeigen gegebenenfallsdecodeURIComponent()verwenden. - Bei Nicht-HTTP-URLs wie
mailto:oderjavascript:ist der Pfad kein hierarchischer Pfad. Diese Links nicht blind als interne Routen behandeln.