javascript - 单击SVG圆形元素时如何带参数调用函数

Question

在一个网站上，我需要使用 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>

我已经尝试了几个解决方案，但没有任何效果，所以在这里粘贴它是没有意义的。

标签： javascriptsvg

Answer 1

使用 querySelectorAll

首先，圆圈现在更具可读性，当圆圈不是很小时，svg 看起来更好:)

其次，我将它们全部调用document.querySelectorAll并添加到每个eventlistener将通过单击运行功能的位置。

并根据您的要求更改颜色和大小，并在需要时在评论中发出警报。

document.querySelectorAll("circle")?.forEach(el => {
  el.addEventListener("click", function (ev) {
    const circle = ev.target;
    if (Number(circle.getAttribute("r")) === 2) {
      circle.style = "fill: green";
      circle.setAttribute("r", 4);
    } else {
      circle.style = "fill: rgba(0,0,72)";
      circle.setAttribute("r", 2);
    }
    // alert("some description (using JS)");
  })
})

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="-10 -10 100 100">
  <g fill="rgba(0,0,72)">
    <circle class="circle" cx="191" cy="90" r="2" />
    <circle cx="5" cy="5" r="2" />
    <circle cx="10" cy="10" r="2" />
    <circle cx="5" cy="20" r="2" />
    <circle cx="10" cy="20" r="2" />
    <circle cx="20" cy="20" r="2" />
    <circle cx="30" cy="20" r="2" />
    <circle cx="40" cy="20" r="2" />
    <circle cx="50" cy="20" r="2" />
    <circle cx="60" cy="20" r="2" />
    <circle cx="30" cy="30" r="2" />
    <circle xmlns="http://www.w3.org/2000/svg" cx="35" cy="10" r="3" fill="rgba(204,153,24)" />
    <circle cx="40" cy="40" r="2" />
    <circle cx="50" cy="50" r="2" />
    <circle cx="60" cy="60" r="2" />
    <circle cx="60" cy="5" r="2" />
    <circle cx="60" cy="10" r="2" />
    <circle cx="60" cy="20" r="2" />
    <circle cx="60" cy="30" r="2" />
    <circle cx="60" cy="40" r="2" />
    <circle cx="60" cy="50" r="2" />
  </g>
</svg>