Javascript 单击SVG circle元素时如何使用参数调用函数

在一个网站上，我需要使用SVG的世界地图，我想改变5个点，使他们可以点击，改变他们的颜色和大小。单击之后，我想显示带有一些描述的弹出窗口（使用JS）

如何执行JS脚本时，我将点击一个特定的点。如何调用函数并向其传递一些参数

下面是SVG中地图的一部分

<svg xmlns="http://www.w3.org/2000/svg" max-width="1000" max-height="820" viewBox="0 0 201 97"><g fill="rgba(0,0,72)"><circle cx="191" cy="90" r=".3"/><circle cx="190" cy="90" r=".3"/><circle cx="189" cy="90" r=".3"/><circle cx="192" cy="89" r=".3"/><circle cx="191" cy="89" r=".3"/><circle xmlns="http://www.w3.org/2000/svg" cx="190" cy="89" r=".9" fill="rgba(204,153,24)"/><circle cx="193" cy="88" r=".3"/><circle cx="192" cy="88" r=".3"/><circle cx="178" cy="88" r=".3"/><circle cx="177" cy="88" r=".3"/><circle cx="194" cy="87" r=".3"/><circle cx="179" cy="87" r=".3"/><circle cx="178" cy="87" r=".3"/><circle cx="197" cy="86" r=".3"/><circle cx="196" cy="86" r=".3"/><circle cx="199" cy="85" r=".3"/><circle cx="198" cy="85" r=".3"/><circle cx="197" cy="85" r=".3"/><circle cx="179" cy="85" r=".3"/><circle cx="198" cy="84" r=".3"/><circle cx="182" cy="84" r=".3"/><circle cx="181" cy="84" r=".3"/><circle cx="180" cy="84" r=".3"/><circle cx="179" cy="84" r=".3"/><circle cx="178" cy="84" r=".3"/><circle cx="177" cy="84" r=".3"/><circle cx="198" cy="83" r=".3"/><circle cx="182" cy="83" r=".3"/><circle cx="181" cy="83" r=".3"/><circle cx="180" cy="83" r=".3"/><circle cx="179" cy="83" r=".3"/><circle cx="178" cy="83" r=".3"/></g></svg>

---

我已经尝试了一些解决方案，但没有任何效果，因此将其粘贴到此处毫无意义。

SVG元素将DOM元素添加到其中，以便您可以将事件处理程序附加到它们。这意味着您可以：

将单击处理程序附加到要响应的特定点，或

在地图上附加一个点击处理程序，然后检查点击是否通过了相关的点（

circle

elements，看起来像），如果通过了，就做些什么

我不确定你指的是哪一个点，考虑到它们有多小，点击它们是很棘手的，所以这里有一个#2的例子：

document.getElementById（“地图”）.addEventListener（“单击”），函数（evt）{
常数圆=evt.目标最近（“圆”）；
if（圆&&this.contains（圆））{
console.log（“单击圆圈”）；
}
});
使用querySelectorAll
首先，圆圈现在更具可读性，而且当圆圈不太小时，svg看起来也更好：）

其次，我通过
document.queryselectoral
调用它们，并将它们添加到通过单击运行函数的每个
eventlistener

如你所问，改变颜色和大小，如果你愿意的话，在评论中加上警告


document.queryselectoral（“圆圈”）？.forEach（el=>{
el.addEventListener（“点击”，功能（ev）{
常数圆=电动目标；
if（Number（circle.getAttribute（“r”））==2）{
circle.style=“填充：绿色”；
圆圈.setAttribute（“r”，4）；
}否则{
circle.style=“填充：rgba（0,0,72）”；
圈.setAttribute（“r”，2）；
}
//警报（“某些描述（使用JS）”；
})
})

这会有所帮助。