如何使用Javascript从SVG路径动态创建链接

svg路径的动态链接不会呈现，但会显示在Chrome的inspector中

我有一个SVG文件，其中包含数百个包含ID的路径。我编写了一些javascript来从每个路径提取ID，并将其包装在一个链接中。当我在Chrome中查看inspector时，我的代码可以工作，但它不会在页面上呈现为可单击的链接。我在某个地方读到，这是因为它是SVG而不是HTML，但我找不到任何方法来解决这个问题

SVG文件

<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"/><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"/><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"/></svg>

形状

Javascript

            $(document).ready(function(){

            var $array = [];
            $('path[id]').each(function(){

                var id = $(this).attr('id');

                $(this).wrap( "<a href="+"https://www.google.com/search?q="+id+"></a>" );

                $array.push(id);

            });
            console.log($array);


            });

$（文档）.ready（函数（）{
var$array=[]；
$（'path[id'）。每个（函数（）{
var id=$（this.attr（'id'）；
$（this.wrap（“”）；
$array.push（id）；
});
log（$array）；
});

每个形状都应该是从ID中提取的动态值的可点击链接。当我运行代码时，形状从画布上消失，但在Chrome的inspector中，我看到了期望的结果

<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title>
<a href="https://www.google.com/search?q=circle"><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"></path></a>
<a href="https://www.google.com/search?q=square"><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"></path></a>
<a href="https://www.google.com/search?q=triangle"><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"></path></a></svg>

形状

---

这里有一个指向我的代码的链接：

，因为您需要一个javascript答案：
因为SVG元素位于不同的名称空间中，所以这很重要

window.onload=（）=>{
常数http://www.w3.org/2000/svg';
设$array=[]；
document.querySelectorAll（“#shapes path”）.forEach（el=>{
$array.push（el.id）
const wrapper=document.createElements（NamSpace，'a'）；
wrapper.setAttribute（'href'`https://www.google.com/search?q=${el.id}`）；
el.parentNode.insertBefore（包装器，el）；
el.parentNode.removeChild（el）；
附加子对象（el）；
})
log（$array）；
}

形状

因为您要的是javascript答案：
因为SVG元素位于不同的名称空间中，所以这很重要

window.onload=（）=>{
常数http://www.w3.org/2000/svg';
设$array=[]；
document.querySelectorAll（“#shapes path”）.forEach（el=>{
$array.push（el.id）
const wrapper=document.createElements（NamSpace，'a'）；
wrapper.setAttribute（'href'`https://www.google.com/search?q=${el.id}`）；
el.parentNode.insertBefore（包装器，el）；
el.parentNode.removeChild（el）；
附加子对象（el）；
})
log（$array）；
}

形状

好吧，您已经提供了一个@MrJ解决方案，这里还有另一个您可能喜欢的解决方案

阅读下面的评论

$（文档）.ready（函数（）{
var$array=[]；
$（'path[id'）。每个（函数（）{
var id=$（this.attr（'id'）；
$（this）.addClass（“lnk”）//这将使其成为可单击的链接
$（this）.click（function（）{//现在处理click事件
window.location.href=”https://www.google.com/search?q=“+id+”；
});
$array.push（id）；
});
});
.lnk{
光标：指针；
}
.lnk:悬停{
填充物：红色；
}

形状
嗯，您已经提供了一个@MrJ解决方案，这里还有另一个您可能喜欢的解决方案

阅读下面的评论


$（文档）.ready（函数（）{
var$array=[]；
$（'path[id'）。每个（函数（）{
var id=$（this.attr（'id'）；
$（this）.addClass（“lnk”）//这将使其成为可单击的链接
$（this）.click（function（）{//现在处理click事件
window.location.href=”https://www.google.com/search?q=“+id+”；
});
$array.push（id）；
});
});
.lnk{
光标：指针；
}
.lnk:悬停{
填充物：红色；
}

形状
请查看我的答案：这是因为您没有添加正确的名称空间元素=请查看我的答案：这是因为您没有添加正确的名称空间元素=