SVGAElement: relList-Eigenschaft

Baseline 2025

Newly available

Since ⁨May 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGAElement__relList

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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