SVG <a> 元素

SVG 是一种用于描述二维矢量图形的 XML 格式，具有可缩放性的特点。在 SVG 中，可以使用 <a> 元素来创建超链接以及在 SVG 中设置跳转链接。

基本语法

<a xlink:href="URL">
  SVG 元素
</a>

• xlink:href：用于指定超链接的目标 URL。

示例

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <a xlink:href="https://www.google.com"></a>
  </rect>
</svg>

在这个例子中，我们通过一个矩形元素包含了一个 <a> 元素，并将其链接到了 Google 的官方网站。

设置跳转链接

在 SVG 中，我们也可以使用 JavaScript，通过获取点击事件，设置跳转链接。

<script type="text/javascript">
  <![CDATA[
    function goToLink() {
      window.location.href = "https://www.baidu.com";
    }
  ]]>
</script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect onclick="goToLink()" x="10" y="10" width="100" height="100"></rect>
</svg>

在这个例子中，我们定义了一个 JavaScript 函数 goToLink()，当矩形被单击时，将跳转链接设置为百度的官方网站。

总结

SVG 中的 <a> 元素能够很好的方便我们创建超链接和设置跳转链接，可以提高用户交互的效果。