SVG <a> 元素

使用 SVG 的錨元素 ( <a>) 定義一個超鏈接。SVG <a>元素用于在SVG圖像中創(chuàng)建鏈接,SVG鏈接就像HTML鏈接一樣工作。

簡單的示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/svg-tutorial.html">
        <text x="10" y="20">/svg/svg-tutorial.html</text>
    </a>

    <a xlink:href="/svg/svg-tutorial.html" xlink:show="new">
        <text x="10" y="40">/svg/svg-tutorial.html
         (xlink:show="new")</text>
    </a>

    <a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
        <text x="10" y="60">/svg/svg-tutorial.html
         (xlink:show="replace")</text>
    </a>

    <a xlink:href="/svg/svg-tutorial.html" target="_blank">
        <text x="10" y="80">m/svg/svg-tutorial.html
         (target="_blank")</text>
    </a>

    <a xlink:href="/svg/svg-tutorial.html" target="_top">
        <text x="10" y="100">/svg/svg-tutorial.html
         (target="_top")</text>
    </a>

</svg>
測試看看?/?

這是結(jié)果圖像:

/svg/svg-tutorial.html    /svg/svg-tutorial.html         (xlink:show="new")    /svg/svg-tutorial.html         (xlink:show="replace")    m/svg/svg-tutorial.html         (target="_blank")    /svg/svg-tutorial.html         (target="_top")

您可以將-element xlink:show上的屬性設(shè)置<a>為new 或replace,以判斷鏈接指向的內(nèi)容是否應(yīng)在新窗口中顯示,還是替換現(xiàn)有窗口的內(nèi)容。

請注意,如果您使用,replace并且在內(nèi)顯示SVG圖像iframe,則iframe它將是鏈接的目標(biāo),而不是瀏覽器窗口。如果您希望瀏覽器窗口而不是目標(biāo)窗口iframe,請使用target屬性值為的屬性_top。

您還可以設(shè)置target屬性,以告知瀏覽器在特定框架或特定窗口中打開鏈接。就像targetHTML中鏈接的屬性一樣(至少在理論上來說)。請注意,瀏覽器以target不同的方式解釋屬性的值。有關(guān)更多詳細(xì)信息,請參見此頁面的最后一部分。

圖形作為鏈接

也可以將圖形用作鏈接。您需要做的只是將要用作SVG形狀的鏈接用作<a>和</a>標(biāo)簽之間的鏈接。這是一個使用矩形而不是文本作為鏈接的示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30"
                style="stroke: #333366; fill: #6666cc"/>
    </a>
    
</svg>
測試看看?/?

這是結(jié)果圖像:

丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清