SVGAElement: relList プロパティ

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.

relList は SVGAElement の読み取り専用プロパティで、生きた DOMTokenList を返します。これは SVG の <a> 要素の rel 属性の <list-of-Link-Types> 値を反映したものです。

値

生きた DOMTokenList です。

relList プロパティ自体は、DOMTokenList オブジェクトを置き換えることができないという意味で読み取り専用ですが、relList プロパティに直接代入することは可能です。これは、その value プロパティに代入することと同等です。同時に、DOMTokenList オブジェクトを変更することも可能です。 add()、 remove()、replace()、toggle() の各メソッドを使用して変更することもできます。

例

次の SVG があったとします。

html

<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
  <!-- テキストを囲むリンク -->
  <a href="/docs/Web/SVG/Reference/Element/text" rel="alternate bookmark">
    <text x="30" y="10">リンクテキスト</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;
}

<a> 要素の rel 属性で定義されたすべてのリンク種別を取得できます。

// SVG の <a> 要素を選択
const svgLink = document.querySelector("a");
const relations = svgLink.relList;

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