JavaScript。单击其中一个可更改颜色，单击其他可恢复，多个元素，如何？

我试图为.svg世界地图提供一个JavaScript“单击更改颜色”函数

预期行为：

单击一个国家/地区可更改其颜色，单击其他国家/地区可更改颜色，但先前单击的恢复为其默认颜色

我现在遇到的bug：

单击一个国家，其颜色已更改，但单击另一个，以前的颜色仍保留

出现错误的代码（意外）：

svg结构：

<g name="us"><path>...</path></g>
<g name="au"><path>...</path></g>
<g name="es"><path>...</path></g>
.....
<g name="ca"><path>...</path></g>

需要纯JavaScript，无需jQuery

如果元素（国家）是三个或五个，我可以这样做，但是元素太多了，有没有一种紧凑的方法来获得这种效果

---

谢谢您的关注，如果可以，请帮助我。：）

您可以在单击时取消选择所有元素，然后选择已单击的元素：

const svg=document.getElementById（'world'）；
const elements=svg.getElementsByTagName（'g'）；
svg.onclick=（{target}）=>{
//确保我们单击了一个组或一个组的子组
//如果没有，我们什么也不做
常数g=目标最近（'g'）；
如果（！g）返回；
//从所有类别中删除所选类别
//并将其添加到单击的
[…elements].forEach（e=>e.classList.remove（'selected'）；
g、 添加（'selected'）；
};
。已选定{
填充物：黄色；
}

更新所有svg的填充样式，然后更新单击的svg的填充样式如何？谢谢，我已经尝试过了，但没有成功，哈哈
(function () {
  var world = document.getElementById("world");  // The svg file
  world.addEventListener("load", function () {
    var doc = world.getSVGDocument();
    doc.addEventListener("click", function (e) {
     e.preventDefault();
      var target = e.target,
          target.style.fill = "#eee";
    });
  });
}());