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:
<!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 > |
chevron_right
filter_none
Output:
Example 2:
<!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 > |
chevron_right
filter_none
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Internet Explorer
- Safari
- Opera