编辑这个页面须要登录或更高权限！

SVG <a> 元素

使用 SVG 的锚元素 ( <a>) 定义一个超链接。SVG <a>元素用于在SVG图像中创建链接，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>
测试看看‹/›

这是结果图像：

/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上的属性设置<a>为new 或replace，以判断链接指向的内容是否应在新窗口中显示，还是替换现有窗口的内容。

请注意，如果您使用，replace并且在内显示SVG图像iframe，则iframe它将是链接的目标，而不是浏览器窗口。如果您希望浏览器窗口而不是目标窗口iframe，请使用target属性值为的属性_top。

您还可以设置target属性，以告知浏览器在特定框架或特定窗口中打开链接。就像targetHTML中链接的属性一样（至少在理论上来说）。请注意，浏览器以target不同的方式解释属性的值。有关更多详细信息，请参见此页面的最后一部分。

图形作为链接

也可以将图形用作链接。您需要做的只是将要用作SVG形状的链接用作<a>和</a>标签之间的链接。这是一个使用矩形而不是文本作为链接的示例：

<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>
测试看看‹/›

这是结果图像：

SVG <defs> 元素SVG <textPath> 元素