SVGAElement.origin — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.origin

Beschreibung

Die schreibgeschützte Eigenschaft origin des SVGAElement-Interface gibt den serialisierten Ursprung der Link-URL eines SVG-<a>-Elements zurück. Der Ursprung besteht aus Schema, Hostname und – falls vom Standardport abweichend – dem Port, z. B. "https://example.com" oder "http://localhost:8080".

Die Eigenschaft ist das SVG-Gegenstück zu HTMLAnchorElement.origin und gehört zu einer Gruppe von URL-Zerlegungs-Eigenschaften (host, hostname, pathname, protocol usw.), die SVG-Links dieselbe Bequemlichkeit bieten wie HTML-Links. Relative URLs werden dabei gegen die Basis-URL des Dokuments aufgelöst.

Typische Einsatzfälle sind das Erkennen externer Links in eingebetteten SVG-Grafiken (z. B. um target="_blank" oder ein Icon zu ergänzen), Sicherheitsprüfungen vor dem Navigieren oder das Filtern von Links nach Domain. Da die Unterstützung noch lückenhaft ist, sollte man die Eigenschaft per Feature-Erkennung prüfen und bei Bedarf auf new URL(...).origin ausweichen.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Ursprung der Link-URL, z. B. "https://example.com:8443". Standardports (80 für http, 443 für https) werden weggelassen. Bei URLs ohne echten Ursprung (z. B. data:, javascript:) lautet der Wert "null".

Beispiele

Ursprung eines SVG-Links auslesen

// &lt;svg&gt;&lt;a id="logo-link" href="https://example.com:8080/start?x=1"&gt;...&lt;/a&gt;&lt;/svg&gt;
const link = document.querySelector('#logo-link');
console.log(link.origin);

https://example.com:8080

Externe Links in einer SVG-Grafik markieren

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

for (const a of svgLinks) {
  if (a.origin !== window.location.origin) {
    a.setAttribute('target', '_blank');
    a.setAttribute('rel', 'noopener noreferrer');
    a.classList.add('extern');
  }
}

Feature-Erkennung mit Fallback über die URL-API

const getOrigin = (a) => {
  if ('origin' in a) return a.origin;
  // href ist bei SVG ein SVGAnimatedString
  const href = a.href.baseVal || a.getAttribute('href') || '';
  try {
    return new URL(href, document.baseURI).origin;
  } catch {
    return 'null';
  }
};

const a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
a.setAttribute('href', 'https://developer.mozilla.org/de/docs/Web/SVG');
console.log(getOrigin(a));

https://developer.mozilla.org

// Wichtig · Fallstricke

Browser-Kompatibilität: Die URL-Zerlegungs-Eigenschaften auf SVGAElement sind experimentell und nicht in allen Browsern verfügbar. Immer mit 'origin' in element prüfen und notfalls new URL(href, document.baseURI).origin verwenden.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert (im Strict Mode ggf. TypeError). Um das Ziel zu ändern, das href-Attribut setzen.
Anders als bei HTML ist a.href bei SVG kein String, sondern ein SVGAnimatedString – für den Rohwert a.href.baseVal nutzen.
Für data:-, blob:-ähnliche opake oder ungültige URLs liefert origin den String "null" (nicht den Wert null). Bei file:-URLs ist das Ergebnis browserabhängig.
Sicherheit: Eine Ursprungsprüfung ersetzt keine serverseitige Validierung; javascript:-URLs in SVG-Links sollten gesondert gefiltert werden.

Siehe auch

SVGAElement SVGAElement.href SVGAElement.host HTMLAnchorElement.origin URL.origin Location.origin HTMLTableElement.align