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
149
|
---
title: <a>
slug: Web/SVG/Element/a
tags:
- Element
- SVG
- SVG Anchor 엘리먼트
translation_of: Web/SVG/Element/a
---
<div>{{SVGRef}}</div>
<p>The <strong><a></strong> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.</p>
<p>In SVG, the <code><a></code> element is a container, meaning, you can create a link around text, like in HTML, but you can also create a link around any shape.</p>
<div id="Exemple">
<div class="hidden">
<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- A link around a shape -->
<a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35"/>
</a>
<!-- A link around a text -->
<a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
<text x="50" y="90" text-anchor="middle">
&lt;circle&gt;
</text>
</a>
</svg></pre>
<pre class="brush: css">/* As SVG does not provide a default visual style for links,
it's considered best practice to add some */
@namespace svgns url(http://www.w3.org/2000/svg);
svgns|a {
cursor: pointer;
}
svgns|a text {
fill: blue; /* Even for text, SVG use fill over color */
text-decoration: underline;
}
svgns|a:hover, svgns|a:active {
outline: dotted 1px blue;
}</pre>
<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
</div>
<div class="warning">
<p>Since this element shares its tag name with <a href="/en-US/docs/Web/HTML/Element/a">HTML's <code><a></code> element</a>, selecting "<code>a</code>" with CSS or <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> may apply to the wrong kind of element. Try <a href="/en-US/docs/Web/CSS/@namespace">the <code>@namespace</code> rule</a> to distinguish between the two.</p>
</div>
<h2 id="Attributes">Attributes</h2>
<dl>
<dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
<dd>This attribute instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.<br>
<small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
<dt>{{SVGAttr("href")}}</dt>
<dd>This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.<br>
<small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("hreflang", "a")}}</dt>
<dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
<small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
<dd>This attribute contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br>
<small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
<dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
<dd>This attribute indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the {{Glossary("URL")}}.<br>
<small><em>Value type</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>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
<dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
<dd>This attribute specifies the relationship of the target object to the link object.<br>
<small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
<dt>{{SVGAttr("target")}}</dt>
<dd>This attribute specifies where to display the linked {{Glossary("URL")}}.<br>
<small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
<dt>{{htmlattrxref("type", "a")}}</dt>
<dd>This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.<br>
<small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
<dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
<dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
<small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
</dl>
<h3 id="Global_attributes">Global attributes</h3>
<dl>
<dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
<dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
<dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
<dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
<dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
<dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
<dt>Event Attributes</dt>
<dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
<dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
<dd><small>Most notably: {{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 Attributes</dt>
<dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
<dt>ARIA Attributes</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">Usage notes</h2>
<p>{{svginfo}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
<td>{{Spec2('Referrer Policy')}}</td>
<td>Added the <code>referrerpolicy</code> attribute.</td>
</tr>
<tr>
<td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("svg.elements.a")}}</p>
|
