<a>
===

**<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="/ja/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- テキストを囲むリンク -->
  <a href="/ja/docs/Web/SVG/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` 
Experimental

 移動するのではなく URL をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。
 *値種別*: **<string>** ; *既定値*: *none*; *アニメーション*: **no**

`href (en-US)`

 ハイパーリンクが指す先の URL または URL フラグメントです。
 *値種別*: **<URL>** ; *既定値*: *none*; *アニメーション*: **yes**

`hreflang`

 ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。
 *値種別*: **<string>** ; *既定値*: *none*; *アニメーション*: **yes**

`ping` 
Experimental

 空白区切りの URL のリストで、ハイパーリンクをたどるとき、 `POST` リクエストで本文が `PING` であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 `Navigator.sendBeacon()` を参照してください。
 *値種別*: **<list-of-URLs>** ; *既定値*: *none*; *アニメーション*: **no**

`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*; *アニメーション*: **no**

`rel` 
Experimental

 対象のオブジェクトとリンクしているオブジェクトの関係です。
 *値種別*: **<list-of-Link-Types>** ; *既定値*: *none*; *アニメーション*: **yes**

`target (en-US)`

 リンクされた URL の表示先です。
 *値種別*: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; *既定値*: `_self`; *アニメーション*: **yes**

`type`

 リンク先の URL の MIME タイプです。
 *値種別*: **<string>** ; *既定値*: *none*; *アニメーション*: **yes**

`xlink:href (en-US)` 
非推奨

 ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。
 *値種別*: **<URL>** ; *既定値*: *none*; *アニメーション*: **yes**

### グローバル属性

コア属性

主なもの: `id`, `lang (en-US)`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件付き処理属性

主なもの: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, 文書要素イベント属性, グラフィックイベント属性

プレゼンテーション属性

主なもの: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

XLink 属性

主なもの: `xlink:title (en-US)`

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>`、`<clipPath>`、`<color-profile>`、`<cursor>` (en-US)、`<filter>` (en-US)、`<font>` (en-US)、`<font-face>` (en-US)、`<foreignObject>`、`<image>`、`<marker>` (en-US)、`<mask>`、`<pattern>`、`<script>`、`<style>` (en-US)、`<switch>`、`<text>`、`<view>` (en-US) |

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Links |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.