<a>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

<a> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の <a> 要素ととても良く似ています。

SVG の <a> 要素はコンテナーですので、（HTML のような）テキストを囲むものだけでなく、図形を囲むリンクを生成することもできます。

例

@namespace svg url(http://www.w3.org/2000/svg); html, body, svg { height: 100%; }

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- 図形を囲むリンク --> <a href="/docs/Web/SVG/Reference/Element/circle"> <circle cx="50" cy="40" r="35" /> </a> <!-- テキストを囲むリンク --> <a href="/docs/Web/SVG/Reference/Element/text"> <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text> </a> </svg>

css

/* SVG ではリンクに既定の視覚スタイルがないので、 何かを追加するのがいいでしょう */ @namespace svg url(http://www.w3.org/2000/svg); /* SVG の <a> 要素のみを選択し、 HTML を除外するために必要。 下記の警告を参照 */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* テキストであっても、 SVG は塗りつぶし色を使用する */ text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; }

警告: この要素は HTML の <a> 要素と同じタグ名なので、 a を CSS や querySelector で選択すると、誤った種類の要素に適用してしまう可能性があります。 @namespace ルールで二つを区別してみてください。

属性

download: 移動するのではなく URL をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。 値の型: <string> ; 既定値: none; アニメーション: 不可
href: ハイパーリンクが指す先の URL または URL フラグメントです。 値の型: <URL> ; 既定値: none; アニメーション: 可
hreflang: ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。 値の型: <string> ; 既定値: none; アニメーション: 不可
ping Experimental: 空白区切りの URL のリストで、ハイパーリンクをたどる際に、 POST リクエストで本文が PING であるものがブラウザーから（バックグラウンドで）送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 Navigator.sendBeacon() を参照してください。 値の型: <list-of-URLs>; 既定値: none; アニメーション: 不可
referrerpolicy Experimental: どのリファラーをアクセス先の URL に送信するかです。 値の型: no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url; 既定値: none; アニメーション: 不可
rel: 対象のオブジェクトとリンクしているオブジェクトの関係です。 値の型: <list-of-Link-Types>; 既定値: none; アニメーション: 可
target: リンクされた URL の表示先です。 値の型: _self | _parent | _top | _blank | <name>; 既定値: _self; アニメーション: 可
type: リンク先の URL の MIME タイプです。 値の型: <string> ; 既定値: none; アニメーション: 可
xlink:href 非推奨;: ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。 値の型: <URL>; 既定値: none; アニメーション: 可

使用コンテキスト

カテゴリー	コンテナー要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素 `<a>`、`<clipPath>`、`<filter>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`