<a>

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

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 図形を囲むリンク -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35"/>
  </a>

  <!-- テキストを囲むリンク -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>
/* 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; アニメーション: no
href
ハイパーリンクが指す先の URL または URL フラグメントです。
値種別: <URL> ; 既定値: none; アニメーション: yes
hreflang
ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。
値種別: <string> ; 既定値: none; アニメーション: yes
ping
空白区切りの URL のリストで、ハイパーリンクをたどるとき、 POST リクエストで本文が PING であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 Navigator.sendBeacon() を参照してください。
値種別: <list-of-URLs> ; 既定値: none; アニメーション: no
referrerpolicy
どのリファラーをアクセス先の URL に送信するかです。
値種別: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; 既定値: none; アニメーション: no
rel
対象のオブジェクトとリンクしているオブジェクトの関係です。
値種別: <list-of-Link-Types> ; 既定値: none; アニメーション: yes
target
リンクされた URL の表示先です。
値種別: _self|_parent|_top|_blank|<name> ; 既定値: _self; アニメーション: yes
type
リンク先の URL の MIME タイプです。
値種別: <string> ; 既定値: none; アニメーション: yes
xlink:href 非推奨 SVG 2
ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。
値種別: <URL> ; 既定値: none; アニメーション: yes

グローバル属性

コア属性
主なもの: id, lang, tabindex
スタイル属性
class, style
条件付き処理属性
主なもの: requiredExtensions, systemLanguage
イベント属性
グローバルイベント属性, 文書要素イベント属性, グラフィックイベント属性
プレゼンテーション属性
主なもの: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
XLink 属性
主なもの: xlink:title
ARIA 属性
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

使用上の注意

カテゴリーコンテナー要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a><altGlyphDef><clipPath><color-profile><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
<a> の定義
勧告候補 xlink:href 属性を href で置き換え
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<a> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
aChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
downloadChrome ? Edge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 51IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 51Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 あり
hreflangChrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 61IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 61Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
pingChrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 61IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 61Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
referrerPolicyChrome 完全対応 51Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android 完全対応 52Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
relChrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 61IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 61Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
targetChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
typeChrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 61IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 61Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
xlink:actuate
非推奨
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
xlink:show
非推奨
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:title
非推奨
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。