1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: <a>
slug: Web/SVG/Element/a
tags:
- Element
- Reference
- SVG
- SVG Container
- SVG コンテナー
- 要素
translation_of: Web/SVG/Element/a
---
<div>{{SVGRef}}</div>
<p><strong><a></strong> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の {{htmlelement("a")}} 要素ととても良く似ています。</p>
<p>SVG の <code><a></code> 要素はコンテナーですので、 (HTML のような) テキストを囲むものだけでなく、図形を囲むリンクを生成することもできます。</p>
<div id="Example">
<div class="hidden">
<pre class="brush: css notranslate">@namespace svg url(http://www.w3.org/2000/svg);
html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html notranslate"><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></pre>
<pre class="brush: css notranslate">/* 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;
}</pre>
<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
</div>
<div class="warning">
<p>この要素は <a href="/ja/docs/Web/HTML/Element/a">HTML の <code><a></code> 要素</a>と同じタグ名なので、 <code>a</code> を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 <a href="/ja/docs/Web/CSS/@namespace"><code>@namespace</code> 規則</a>で二つを区別してみてください。</p>
</div>
<h2 id="Attributes" name="Attributes">属性</h2>
<dl>
<dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
<dd>移動するのではなく {{Glossary("URL")}} をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。<br>
<small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd>
<dt>{{SVGAttr("href")}}</dt>
<dd>ハイパーリンクが指す先の {{Glossary("URL")}} または URL フラグメントです。<br>
<small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("hreflang", "a")}}</dt>
<dd>ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。<br>
<small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
<dd>空白区切りの URL のリストで、ハイパーリンクをたどるとき、 {{HTTPMethod("POST")}} リクエストで本文が <code>PING</code> であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 {{domxref("Navigator.sendBeacon()")}} を参照してください。<br>
<small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd>
<dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
<dd>どの<a href="/ja/docs/Web/HTTP/Headers/Referer">リファラー</a>をアクセス先の {{Glossary("URL")}} に送信するかです。<br>
<small><em>値種別</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd>
<dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
<dd>対象のオブジェクトとリンクしているオブジェクトの関係です。<br>
<small><em>値種別</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
<dt>{{SVGAttr("target")}}</dt>
<dd>リンクされた {{Glossary("URL")}} の表示先です。<br>
<small><em>値種別</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>既定値</em>: <code>_self</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("type", "a")}}</dt>
<dd>リンク先の URL の {{Glossary("MIME type", "MIME タイプ")}}です。<br>
<small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
<dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
<dd>ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。<br>
<small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd>
</dl>
<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>
<dl>
<dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt>
<dd><small>主なもの: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
<dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt>
<dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
<dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt>
<dd><small>主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
<dt>イベント属性</dt>
<dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></dd>
<dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt>
<dd><small>主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
<dt>XLink 属性</dt>
<dd><small>主なもの: {{SVGAttr("xlink:title")}}</small></dd>
<dt>ARIA 属性</dt>
<dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p>{{svginfo}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>{{SVGAttr("xlink:href")}} 属性を {{SVGAttr("href")}} で置き換え</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("svg.elements.a")}}</p>
|
