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-onlyrelList property of theSVGAElement returns a liveDOMTokenList reflecting the space-separated string<list-of-Link-Types> values of therel attribute of the SVG<a> element.

Value

A liveDOMTokenList.

Although therelList property itself is read-only in the sense that you can't replace theDOMTokenList object, you can still assign to therelList property directly, which is equivalent to assigning to itsvalue property. You can also modify theDOMTokenList object using theadd(),remove(),replace(), andtoggle() 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></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'srel attribute:

// Select an SVG <a> elementconst svgLink = document.querySelector("a");const relations = svgLink.relList;relations.forEach((relValue) => {  log(relValue);});