javascript - 如何添加 <a> 链接到 svg 路径以使用 javascript 导航到另一个 svg 图像

Question

我是 svg 的新手。我有两个 svg 图像，我需要在一个 svg 图像的路径周围附加链接，单击该路径我应该导航到另一个 svg 图像。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g id="path1">
     <a xlink:href="" target="_top">
       <path id="parcel" />
     </a>
     </g>
 </svg>

我应该如何将属性添加到我的应用程序 (html) 中并使用 javascript 将 href 链接附加到它。提前致谢

Answer 1

获取对 <a> 的引用使用您选择的任何方法添加元素。例如

 <a id="mylink" xlink:href="" target="_top">
   <path id="parcel" />
 </a>

var  mylink = document.getElementById("mylink");

然后你可以设置xlink:href属性使用:

mylink.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                      'http://www.google.com');