SVGAElement: relList-Eigenschaft

Baseline 2025

Neu verfügbar

Seit May 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die schreibgeschützte relList-Eigenschaft des SVGAElement gibt eine Live-Instanz von DOMTokenList zurück, die die durch Leerzeichen getrennte Zeichenkettenwerte <list-of-Link-Types> des rel-Attributs des SVG-<a>-Elements widerspiegelt.

Wert

Eine Live-Instanz von DOMTokenList.

Obwohl die relList-Eigenschaft selbst in dem Sinne schreibgeschützt ist, dass Sie das DOMTokenList-Objekt nicht ersetzen können, können Sie dennoch direkt auf die relList-Eigenschaft zuweisen, was gleichbedeutend mit einer Zuweisung zu ihrer value-Eigenschaft ist. Sie können das DOMTokenList-Objekt auch mit den Methoden add(), remove(), replace() und toggle() ändern.

Beispiele

Gegeben sei folgendes SVG:

html

<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Reference/Element/text" rel="alternate bookmark">
    <text x="30" y="10">Link text</text>
  </a>
</svg>

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

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}
svg {
  height: 50px;
}
text {
  font-size: 1rem;
}

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

Wir können jeden Linktyp abrufen, der durch das rel-Attribut des <a>-Elements definiert ist:

// Select an SVG <a> element
const svgLink = document.querySelector("a");
const relations = svgLink.relList;

relations.forEach((relValue) => {
  log(relValue);
});

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # __svg__SVGAElement__relList

Browser-Kompatibilität

Siehe auch

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