SVGAElement: rel プロパティ

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.

rel は SVGAElement のプロパティで、この SVG の <a> 要素の rel 属性の値を反映した文字列を返します。

rel 属性は、空白区切りで指定されるリンクタイプのリスト（<list-of-Link-Types>）を指定し、<a> 要素が表すターゲットまたはリソースと現在の文書との関係を示します。このプロパティは rel 属性の値を取得または設定できます。

値

文字列です。rel 属性の値です。

例

次の 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="terms-of-service">
    <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;
}

rel 属性を取得および設定できます。

// SVG の <a> 要素を取得
const svgLink = document.querySelector("svg a");

// rel プロパティにアクセス
log(`Rel: ${svgLink.rel}`);

// rel プロパティを設定
svgLink.rel = "alternate bookmark";

// 再び rel プロパティにアクセス
log(`New rel: "${svgLink.rel}"`); // New rel: "alternate bookmark"