SVGAElement: search-Eigenschaft

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die search-Eigenschaft der Schnittstelle SVGAElement repräsentiert den Abfragestring des Elements. Sie besteht aus einem "?", gefolgt von den Parametern des Attributs href des SVG-Elements <a>. Wenn die URL keine Parameter hat, enthält diese Eigenschaft einen leeren String, "".

Diese Eigenschaft kann festgelegt werden, um den Abfragestring der URL zu ändern. Beim Festlegen wird dem bereitgestellten Wert ein einzelnes Präfix "?" hinzugefügt, falls es noch nicht vorhanden ist. Durch Festlegen auf "" wird der Abfragestring entfernt. Das Festlegen schreibt außerdem das Attribut href des Elements als vollständige, absolute URL neu.

Die Abfrage wird beim Festlegen prozentkodiert, beim Lesen jedoch nicht prozentdekodiert.

Weitere Informationen finden Sie unter URL.search.

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <a id="link" href="https://example.com/search?q=svg">
    <text x="0" y="20">Search for SVG</text>
  </a>
</svg>

<pre id="log"></pre>

svg {
  width: 200px;
  height: 30px;
}
svg a text {
  fill: blue;
  text-decoration: underline;
}
#log {
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
}

Wir können den Abfragestring des Links auslesen:

const link = document.getElementById("link");

log(`search: "${link.search}"`); // search: "?q=svg"

Erweiterte Analyse mit URLSearchParams

Alternativ kann URLSearchParams verwendet werden, um einzelne Parameter aus dem Abfragestring auszulesen:

html

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <a id="link" href="https://example.com/search?q=svg">
    <text x="0" y="20">Search for SVG</text>
  </a>
</svg>

<pre id="log"></pre>

svg {
  width: 200px;
  height: 30px;
}
svg a text {
  fill: blue;
  text-decoration: underline;
}
#log {
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
}

const link = document.getElementById("link");
const params = new URLSearchParams(link.search);

log(`q: "${params.get("q")}"`); // q: "svg"

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # InterfaceSVGAElement

Browser-Kompatibilität

Siehe auch

SVG-Element <a>
HTMLAnchorElement.search

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

SVGAElement: search-Eigenschaft

Wert

Beispiele

Abrufen des Suchstrings aus einem SVG-Link

Erweiterte Analyse mit URLSearchParams

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN