このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
SVGAElement: rel プロパティ
Baseline
2025
最近利用可能
May 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
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 属性を取得および設定できます。
js
// 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"
[フレーム]
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGAElement |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。