SVGAElement.search — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.search

Beschreibung

Die Eigenschaft search von SVGAElement liefert den Query-String der URL, auf die ein SVG-Link (<a> innerhalb eines <svg>) verweist. Der Wert beginnt mit einem Fragezeichen (?), gefolgt von den Parametern, z. B. "?id=42&lang=de". Enthält die URL keinen Abfrageteil, ist der Wert ein leerer String.

Die Eigenschaft stammt aus dem Mixin HTMLHyperlinkElementUtils, das SVG 2 auch für SVGAElement vorsieht. Damit verhält sie sich wie HTMLAnchorElement.search: Die URL wird aus dem Attribut href (bzw. dem veralteten xlink:href) gegen die Basis-URL des Dokuments aufgelöst.

Beim Schreiben wird nur der Abfrageteil der URL ersetzt und das href-Attribut entsprechend aktualisiert; ein fehlendes ? wird automatisch ergänzt. Das ist praktisch, um z. B. in interaktiven Diagrammen oder Karten Tracking- oder Filterparameter an Links anzuhängen, ohne die URL manuell zusammenzubauen. Für komfortable Bearbeitung einzelner Parameter kombiniert man den Wert am besten mit URLSearchParams.

Parameter

Name	Typ	Default	Beschreibung
$wert (Setter)	string		Neuer Query-String. Ein führendes `?` ist optional; ein leerer String entfernt den Abfrageteil.

Rückgabewert

Typ

string

Beschreibung

Der Query-String der aufgelösten Link-URL inklusive führendem ? oder "", wenn keiner vorhanden ist bzw. die URL ungültig ist.

Beispiele

Query-String eines SVG-Links auslesen

// <svg><a id="link" href="https://example.com/produkte?kategorie=lampen&seite=2"><text y="20">Lampen</text></a></svg>
const link = document.querySelector('svg a#link');

if ('search' in link) {
  console.log(link.search);
} else {
  // Fallback: href-Attribut selbst parsen
  const url = new URL(link.getAttribute('href'), document.baseURI);
  console.log(url.search);
}

?kategorie=lampen&seite=2

Parameter mit URLSearchParams auswerten

const link = document.querySelector('svg a#link');
const params = new URLSearchParams(link.search);

console.log(params.get('kategorie'));
console.log(Number(params.get('seite')));

lampen 2

Tracking-Parameter an alle Links eines Diagramms anhängen

const svgLinks = document.querySelectorAll('#diagramm a');

svgLinks.forEach((a) => {
  if (!('search' in a)) return; // Browser ohne Unterstützung überspringen
  const params = new URLSearchParams(a.search);
  params.set('utm_source', 'diagramm');
  a.search = params.toString(); // '?' wird automatisch ergänzt
  console.log(a.getAttribute('href'));
});

https://example.com/produkte?kategorie=lampen&seite=2&utm_source=diagramm

// Wichtig · Fallstricke

Browser-Unterstützung: Die URL-Zerlegungs-Eigenschaften (search, host, pathname …) von SVGAElement werden nicht von allen Browsern unterstützt. Prüfe vorher mit 'search' in element und nutze als Fallback new URL(element.getAttribute('href'), document.baseURI).search.
SVGAElement.href ist ein SVGAnimatedString und kein String – für den URL-Text also element.href.baseVal oder getAttribute('href') verwenden.
Der Rückgabewert ist prozentkodiert; zum Auswerten einzelner Parameter URLSearchParams statt eigener String-Zerlegung nutzen.
Das Setzen von search ändert das href-Attribut; ein zuvor verwendetes xlink:href kann dabei je nach Browser unberührt bleiben. Für neuen Code nur noch href verwenden.
Beim Einfügen von Werten aus Nutzereingaben keine URLs mit javascript:-Schema in href zulassen (XSS-Risiko).

Siehe auch

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