SVG <a> Element
The “<a>” element in SVG is used to create a hyperlink to other webpages or any URL. This tag works in the same way as HTML “<a>” tag.
Syntax:
<a href="" target="" type="" rel="" download=""></a>
Attributes:
- href: It stands for hypertext reference and takes the link to the other documents.
- download: It instructs the browser to download a file.
- hreflang: It is the human language of the URL or in simple words the URL fragment that hyperlink point is the hreflang.
- rel: It tells the relationship between the target and source documents.
- target: It tells about where the webpage is to be displayed.
- type: It tells about the MIME type of the document linked with URL.
- ping: It is the space-separated list of URLs.
Below given are a few examples of the above function.
Example 1:
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta property="viewport" content="width=device-width, initial-scale=1.0"/> <title>GeeksforGeeks</title> </head> <body> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2> <a> Tag SVG </h2> </center> <svg width="500" height="500"> <circle cx="150" cy="100" r="80" fill="green"> </a> </svg> </div> </body></html> |
Output:
Example 2:
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta property="viewport" content="width=device-width, initial-scale=1.0"/> <title>GeeksforGeeks</title> </head> <body> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2> <a> Tag SVG </h2> </center> <svg width="500" height="500"> <rect x="80" y="30" width="150" height="80" fill="green"> </a> </svg> </div> </body></html> |
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome 1 and above
- Edge 12 and above
- Firefox 1.5 and above
- Internet Explorer 9 and above
- Safari 3.1 and above
- Opera 9 and above
.png)
