SVGAElement.hostname — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.hostname

Beschreibung

Die Eigenschaft hostname eines SVGAElement gibt den Hostnamen der Ziel-URL eines SVG-Links als String zurück, also z. B. "example.com" für https://example.com:8080/pfad. Anders als host enthält hostname keine Portnummer.

In SVG 2 wurde festgelegt, dass SVGAElement die Mixin-Schnittstelle HTMLHyperlinkElementUtils einbindet. Deshalb gibt es dort dieselben URL-Zerlegungs-Eigenschaften wie bei HTMLAnchorElement: protocol, host, hostname, port, pathname, search, hash und origin. Relative URLs werden gegen die Basis-URL des Dokuments aufgelöst.

Verwendet wird die Eigenschaft z. B., um in eingebetteten SVG-Grafiken (Diagramme, Karten, Infografiken) externe Links zu erkennen und zu kennzeichnen oder um das Linkziel auf einen anderen Host umzuschreiben. Beim Setzen wird nur der Hostname-Teil der URL im href-Attribut ersetzt; Protokoll, Port, Pfad, Query und Fragment bleiben erhalten.

Da die Unterstützung in den Browsern nicht einheitlich ist, empfiehlt sich in der Praxis oft der robustere Weg über new URL(link.href.baseVal, document.baseURI).hostname.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Hostname (ohne Protokoll und Port), z. B. `"cdn.example.org"`. Ungültige Werte werden ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der Hostname der aufgelösten Ziel-URL ohne Port. Leerer String, wenn kein href gesetzt ist, die URL nicht geparst werden kann oder keinen Host hat (z. B. bei mailto:).

Beispiele

Hostnamen eines SVG-Links auslesen (mit Fallback)

const svgNS = 'http://www.w3.org/2000/svg';
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', 'https://docs.example.com:8443/api?x=1#top');

// Nativ, falls unterstützt – sonst über die URL-API
const getHostname = (a) =>
  'hostname' in a
    ? a.hostname
    : new URL(a.href.baseVal, document.baseURI).hostname;

console.log(getHostname(link));

docs.example.com

Externe Links in einem Inline-SVG markieren

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

for (const a of links) {
  const href = a.href.baseVal || a.getAttribute('xlink:href');
  if (!href) continue;
  const hostname = a.hostname ?? new URL(href, document.baseURI).hostname;

  if (hostname && hostname !== location.hostname) {
    a.setAttribute('target', '_blank');
    a.setAttribute('rel', 'noopener noreferrer');
    a.classList.add('extern');
  }
}
console.log(`${links.length} SVG-Links geprüft`);

3 SVG-Links geprüft

Linkziel auf einen anderen Host umschreiben

const a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
a.setAttribute('href', 'https://staging.example.com/report?id=42');

if ('hostname' in a) {
  a.hostname = 'www.example.com';
} else {
  const url = new URL(a.href.baseVal, document.baseURI);
  url.hostname = 'www.example.com';
  a.setAttribute('href', url.href);
}

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

https://www.example.com/report?id=42

// Wichtig · Fallstricke

Browser-Kompatibilität: Die URL-Zerlegungs-Eigenschaften an SVGAElement stammen aus SVG 2 und werden nicht von allen Browsern unterstützt. Deshalb vorher mit 'hostname' in element prüfen oder direkt die URL-API nutzen.
SVGAElement.href ist kein String, sondern ein SVGAnimatedString. Die URL steht in href.baseVal, nicht in href selbst.
hostname enthält nie den Port. Brauchst du host:port, nimm host. Für Sicherheitsprüfungen (gleicher Ursprung) solltest du origin vergleichen, weil dort Protokoll und Port mit drin sind.
Internationalisierte Domainnamen werden in Punycode zurückgegeben (z. B. xn--mnchen-3ya.de).
Ältere SVG-Dateien nutzen oft xlink:href. In Browsern, die nur href auswerten, kann hostname dann leer sein.

Siehe auch

SVGAElement SVGAElement.host SVGAElement.href HTMLAnchorElement.hostname URL.hostname SVGAnimatedString MathMLAnchorElement.username