Question

我已经通过网络进行了搜索，并发现图像在转换为SVG格式时可以点击，但我仍然不确定如何执行此操作。例如，下面的图片，我需要每个盒子都可点击，你如何去做这个，是否有任何可以帮助我的应用程序，提前谢谢你

Answer 1

您可以使用SVG执行此操作。但是你可能会发现使用HTML image map更容易。

Answer 2

如果您能够编辑SVG本身，您可以使用锚标记包装每个元素。

＆＃13;

<svg>
  <a href="www.link1.com">
    <rect x="10" y="10" width="60" height="50" fill="#ddd">
  </a>
  <a href="www.link2.com">
    <rect x="75" y="10" width="60" height="50" fill="#ddd">
  </a>
</svg>

＆＃13;

否则，您可以使用Javascript为每个元素添加点击处理程序。

＆＃13;

document.getElementById("rect1").addEventListener("click", function() {
  window.open('www.link1.com')
});

document.getElementById("rect2").addEventListener("click", function() {
  window.open('www.link2.com')
});

＆＃13;

<svg>
    <rect id="rect1" x="10" y="10" width="60" height="50" fill="#ddd"/>
    <rect id="rect2" x="75" y="10" width="60" height="50" fill="#ddd"/>
</svg>

＆＃13;

使SVG图像的不同部分可单击

2 个答案: