SVG <a>用法及代码示例

SVG中的“<a>”元素用于创建到其他网页或任何URL的超链接。该标签的工作方式与HTML “<a>”标签相同。

用法:

<a href="" 
   target="" 
   type="" 
   rel="" 
   download=""></a>

属性：

href:它代表超文本引用，并指向其他文档的链接。
download:它指示浏览器下载文件。
hreflang:是URL的人类语言，或者简单地说，超链接指向的URL片段就是hreflang。
rel:它告诉目标文档和源文档之间的关系。
target:它告知要在何处显示网页。
type:它说明与URL链接的文档的MIME类型。
ping:它是用空格分隔的URL列表。

以下给出了上述函数的一些示例。

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

输出：

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

输出：

支持的浏览器：此SVG元素支持以下浏览器：

Chrome
Edge
Firefox
IE浏览器
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 SVG <a> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。