<a>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

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

ハイパーリンクが指す先の 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

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

type

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

xlink:href 非推奨;

ハイパーリンクがさす先の 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: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><clipPath><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# AElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
download
href
hreflang
ping
Experimental
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
systemLanguage
target
type
xlink:actuate
Deprecated
xlink:href
Deprecated
xlink:show
Deprecated
xlink:title
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.