SVGAElement: relList property

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.

The read-only relList property of the SVGAElement returns a live DOMTokenList reflecting the space-separated string <list-of-Link-Types> values of the rel attribute of the SVG <a> element.

Value

A live DOMTokenList.

Although the relList property itself is read-only in the sense that you can't replace the DOMTokenList object, you can still assign to the relList property directly, which is equivalent to assigning to its value property. You can also modify the DOMTokenList object using the add(), remove(), replace(), and toggle() methods.

Examples

Given the following 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;
}

We can retrieve every link type defined by <a> element's rel attribute:

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

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