使用 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>测试看看‹/›
这是结果图像：
您可以将-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>测试看看‹/›
这是结果图像：