SVGAElement.host — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.host

Beschreibung

Die Eigenschaft host von SVGAElement gibt den Host-Anteil der URL zurück, auf die ein SVG-Link (<a href="…"> innerhalb eines <svg>) zeigt. Der Wert besteht aus dem Hostnamen und, falls vorhanden und nicht der Standardport des Schemas, einem Doppelpunkt mit Portnummer, z. B. "example.com:8080".

SVG 2 bindet dafür die Schnittstelle HTMLHyperlinkElementUtils ein, die auch HTMLAnchorElement nutzt. Dadurch stehen an SVG-Links dieselben URL-Zerlegungseigenschaften zur Verfügung wie an HTML-Links: protocol, host, hostname, port, pathname, search, hash und origin. Relative URLs werden gegen die Basis-URL des Dokuments aufgelöst.

Setzt man host, wird das href-Attribut des Elements entsprechend umgeschrieben, die übrigen URL-Bestandteile bleiben erhalten. Das ist praktisch, um z. B. alle Links in einer eingebetteten SVG-Grafik von einer Staging- auf eine Produktionsdomain umzustellen. Hat das Element kein gültiges href, liefert host einen leeren String.

Rückgabewert

Typ

string

Beschreibung

Hostname plus optional :Port der aufgelösten Ziel-URL, z. B. "example.com" oder "localhost:3000". Leerer String, wenn kein gültiges href vorhanden ist oder die URL keinen Host hat (z. B. mailto:).

Beispiele

Host eines SVG-Links auslesen

// <svg><a id="logo-link" href="https://example.com:8443/start?ref=svg"><circle r="20" cx="25" cy="25"/></a></svg>
const link = document.querySelector('#logo-link');

console.log(link instanceof SVGAElement); // true
console.log(link.host);

true example.com:8443

Mit Feature-Erkennung und Fallback über URL

const getSvgLinkHost = (a) => {
  if (typeof a.host === 'string') return a.host;
  // Fallback: href ist bei SVG ein SVGAnimatedString
  const raw = a.href?.baseVal ?? a.getAttribute('href') ?? '';
  try {
    return new URL(raw, document.baseURI).host;
  } catch {
    return '';
  }
};

document.querySelectorAll('svg a').forEach((a) => {
  console.log(getSvgLinkHost(a));
});

example.com:8443

Alle SVG-Links auf eine andere Domain umstellen

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

for (const a of svgLinks) {
  if ('host' in a && a.host === 'staging.example.com') {
    a.host = 'www.example.com'; // Pfad, Query und Hash bleiben erhalten
  }
  console.log(a.getAttribute('href'));
}

https://www.example.com/produkte?id=42#details

// Wichtig · Fallstricke

Browser-Kompatibilität: Die URL-Zerlegungseigenschaften an SVGAElement werden nicht von allen Browsern unterstützt. Vor Gebrauch mit 'host' in element prüfen und bei Bedarf auf new URL(…) ausweichen.
Nicht mit href verwechseln: An SVG-Links ist href ein SVGAnimatedString (aus SVGURIReference), kein String. Den eigentlichen Wert liefert a.href.baseVal oder a.getAttribute('href').
host oder hostname: host enthält den Port, hostname nicht. Standardports (443 bei https, 80 bei http) tauchen nicht auf.
Ältere SVG-Dateien nutzen oft xlink:href. Die aufgelöste URL berücksichtigt das zwar, aber beim Setzen von host kann je nach Implementierung das href-Attribut ohne Namensraum geschrieben werden.
Bei URLs ohne Host (z. B. mailto:, data:) ist der Wert ein leerer String, und das Setzen hat keine Wirkung.

Siehe auch

SVGAElement SVGAElement.hostname SVGAElement.port SVGAElement.href HTMLAnchorElement.host URL.host HTMLTableElement.rows