使用 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é)果圖像:
您可以將-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é)果圖像: