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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。