Related Articles

Related Articles

SVG <a> Element
  • Last Updated : 07 Sep, 2020

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
                <a href="http://geeksforgeeks.org">
                    <circle cx="150" cy="100"
                            r="80" fill="green">
                </a>
            </svg>
        </div>
    </body
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
                <a href="http://geeksforgeeks.org">
                    <rect x="80" y="30" width="150"
                          height="80" fill="green">
                </a>
            </svg>
        </div>
    </body
</html>

chevron_right


Output:

Browsers Supported: The following browsers are supported by this SVG element:

  • Chrome
  • Edge
  • Firefox
  • Internet Explorer
  • Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :