SVG中的链接

SVG（Scalable Vector Graphics）是基于XML的矢量图形格式，支持丰富的图形元素和特效。在SVG中，我们可以使用链接来实现点击跳转到指定页面的功能。

使用a元素创建链接

在HTML中，我们使用<a>元素来创建链接，SVG中也可以使用a元素来创建链接。与HTML中的<a>元素一样，SVG中的a元素有href属性指定链接目标，target属性指定链接打开方式等。

举个例子，以下SVG图形中的矩形被设置为链接，点击后将在新窗口中打开百度网站：

<svg width="200" height="100">
  <a href="https://www.baidu.com" target="_blank">
    <rect x="10" y="10" width="180" height="80" stroke="black" fill="white" />
  </a>
</svg>

在这个例子中，<rect>元素被包裹在<a>元素中，成为了可点击的链接。点击矩形时，浏览器会自动打开一个新窗口，在新窗口中访问了百度网站。

在SVG图形内使用锚点

除了跳转到外部链接，SVG中还可以使用锚点跳转到同一页面内的指定位置。在SVG中，我们使用<a>元素的href属性指定锚点名称，使用<text>元素的id属性指定锚点位置。

举个例子，以下SVG图形中的文本被设置为链接，点击后将跳转到文本所在位置：

<svg width="200" height="100">
  <a href="#hello">
    <text x="100" y="50" text-anchor="middle" id="hello">Hello World!</text>
  </a>
</svg>

在这个例子中，<text>元素被包裹在<a>元素中，成为了跳转目标。点击文本时，浏览器会自动滚动到文本所在位置，实现了内部跳转的效果。

总结

在SVG中，我们可以使用<a>元素来创建链接，实现外部跳转和内部锚点跳转。通过合理的使用链接，我们可以为SVG图形添加更多的交互性和导航性。