-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
114 lines (90 loc) · 4.4 KB
/
index.md
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
---
title: <a>
slug: Web/SVG/Element/a
page-type: svg-element
browser-compat: svg.elements.a
---
{{SVGRef}}
The **\<a>** SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's {{htmlelement("a")}} element.
SVG's `<a>` element is a container, which means you can create a link around text (like in HTML) but also around any shape.
## Example
```css hidden
@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 link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35" />
</a>
<!-- A link around a text -->
<a href="/docs/Web/SVG/Element/text">
<text x="50" y="90" text-anchor="middle"><circle></text>
</a>
</svg>
```
```css
/* As SVG does not provide a default visual style for links,
it's considered best practice to add some */
@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML's.
See warning below */
svg|a:link,
svg|a:visited {
cursor: pointer;
}
svg|a text,
text svg|a {
fill: blue; /* Even for text, SVG uses fill over color */
text-decoration: underline;
}
svg|a:hover,
svg|a:active {
outline: dotted 1px blue;
}
```
{{EmbedLiveSample('Example', 100, 100)}}
> [!WARNING]
> Since this element shares its tag name with [HTML's `<a>` element](/en-US/docs/Web/HTML/Element/a), selecting `a` with CSS or {{domxref("Document.querySelector", "querySelector")}} may apply to the wrong kind of element. Try [the `@namespace` rule](/en-US/docs/Web/CSS/@namespace) to distinguish the two.
## Attributes
- [`download`](/en-US/docs/Web/HTML/Element/a#download)
- : 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.
_Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **no**
- {{SVGAttr("href")}}
- : The {{Glossary("URL")}} or URL fragment the hyperlink points to.
_Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **yes**
- [`hreflang`](/en-US/docs/Web/HTML/Element/a#hreflang)
- : The human language of the URL or URL fragment that the hyperlink points to.
_Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **yes**
- [`ping`](/en-US/docs/Web/HTML/Element/a#ping) {{experimental_inline}}
- : A space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body `PING` 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 {{domxref("Navigator.sendBeacon()")}}.
_Value type_: **[\<list-of-URLs>](/en-US/docs/Web/SVG/Content_type#list-of-ts)** ; _Default value_: _none_; _Animatable_: **no**
- [`referrerpolicy`](/en-US/docs/Web/HTML/Element/a#referrerpolicy)
- : Which [referrer](/en-US/docs/Web/HTTP/Headers/Referer) to send when fetching the {{Glossary("URL")}}.
_Value type_: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; _Default value_: _none_; _Animatable_: **no**
- [`rel`](/en-US/docs/Web/HTML/Element/a#rel)
- : The relationship of the target object to the link object.
_Value type_: **[\<list-of-Link-Types>](/en-US/docs/Web/HTML/Attributes/rel)** ; _Default value_: _none_; _Animatable_: **yes**
- {{SVGAttr("target")}}
- : Where to display the linked {{Glossary("URL")}}.
_Value type_: `_self`|`_parent`|`_top`|`_blank`|**\<name>** ; _Default value_: `_self`; _Animatable_: **yes**
- [`type`](/en-US/docs/Web/HTML/Element/a#type)
- : A {{Glossary("MIME type")}} for the linked URL.
_Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **yes**
- {{SVGAttr("xlink:href")}} {{deprecated_inline}}
- : The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers.
_Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **yes**
## Usage context
{{svginfo}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{SVGAttr("xlink:title")}} attribute
- HTML {{HTMLElement("a")}} element