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

カテゴリー	コンテナー要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素 `<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

属性

グローバル属性

使用上の注意

仕様書

ブラウザーの互換性