SVGAElement.hash — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.hash

Beschreibung

Die Eigenschaft hash eines SVGAElement gibt den Fragmentbezeichner der Ziel-URL zurück, also den Teil nach dem Rautezeichen einschließlich #, zum Beispiel "#kapitel-2". Hat die URL kein Fragment, ist der Wert ein leerer String "".

Laut SVG 2 übernimmt SVGAElement die URL-Zerlegungseigenschaften von HTMLHyperlinkElementUtils, die man vom HTML-<a> kennt (protocol, host, pathname, search, hash usw.). Die URL wird aus dem Attribut href (oder dem veralteten xlink:href) gegen die Basis-URL des Dokuments aufgelöst.

Die Eigenschaft ist schreibbar. Weisen Sie einen neuen Wert zu, wird nur das Fragment ausgetauscht und das href-Attribut entsprechend angepasst. Ein führendes # ist dabei optional. Das eignet sich etwa für Sprungmarken in interaktiven SVG-Diagrammen, bei denen Links auf Abschnitte der Seite zeigen.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	string		Neuer Fragmentbezeichner, mit oder ohne führendes `#`. Ein leerer String entfernt das Fragment.

Rückgabewert

Typ

string

Beschreibung

Das Fragment der aufgelösten Ziel-URL samt führendem #, oder "", wenn kein Fragment vorhanden ist.

Beispiele

Fragment auslesen, mit Ausweichlösung

const link = document.querySelector('svg a');
// z. B. <a href="/doku/svg.html#pfade">

const getHash = (a) => {
  if ('hash' in a) return a.hash;
  // Ausweichlösung: URL selbst auflösen
  const href = a.href?.baseVal ?? a.getAttribute('href') ?? '';
  return new URL(href, document.baseURI).hash;
};

console.log(getHash(link));

#pfade

Fragment umschreiben

const link = document.querySelector('#diagramm a');
// vorher: href="bericht.html#q1"

if ('hash' in link) {
  link.hash = 'q3'; // '#' ist optional
} else {
  const url = new URL(link.getAttribute('href'), document.baseURI);
  url.hash = 'q3';
  link.setAttribute('href', url.href);
}

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

bericht.html#q3 (bzw. die absolute URL im Ausweichzweig)

Interne Sprunglinks im SVG weich scrollen

document.querySelectorAll('svg a').forEach((a) => {
  a.addEventListener('click', (event) => {
    const href = a.getAttribute('href') ?? '';
    const url = new URL(href, document.baseURI);
    const hash = 'hash' in a ? a.hash : url.hash;
    if (!hash || url.pathname !== location.pathname) return;

    const ziel = document.getElementById(decodeURIComponent(hash.slice(1)));
    if (ziel) {
      event.preventDefault();
      ziel.scrollIntoView({ behavior: 'smooth' });
      history.pushState(null, '', hash);
    }
  });
});

// Wichtig · Fallstricke

Browser-Unterstützung: Die HTMLHyperlinkElementUtils-Eigenschaften auf SVGAElement sind nur teilweise umgesetzt. Prüfen Sie vorher mit 'hash' in element, ob sie vorhanden ist, und lösen Sie die URL sonst selbst mit new URL(...) auf.
Namenskonflikt bei href: Auf SVGAElement ist href ein SVGAnimatedString, kein String. Den Rohwert erhalten Sie über a.href.baseVal oder getAttribute('href').
Der Rückgabewert enthält das führende #. Für getElementById müssen Sie es mit slice(1) entfernen und prozentkodierte Zeichen mit decodeURIComponent zurückwandeln.
Ist nur xlink:href gesetzt, verhalten sich Browser unterschiedlich. Verwenden Sie in neuem Code das einfache href.
Ein Fragment allein ("#") liefert "", genau wie beim HTML-<a>.

Siehe auch

SVGAElement SVGAElement.href SVGAElement.pathname SVGAElement.search HTMLAnchorElement.hash URL.hash Location.hash