SVGAElement: relList property

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);
});

Specifications

Scalable Vector Graphics (SVG) 2

SVGAElement: relList property

Value

Examples

Specifications

See also