Javascript 在svg图像上添加图层

我有一个想法，创建一个具有图层功能的地图

我有svg格式的地图初始图像。我想给它添加层，每个层都应该有一组对象（多边形的坐标）。当我在例如1层上完成绘制多边形时，我想将所有对象的坐标发送到数据库，并将它们存储在文档（MongoDB）中，在文档中我将使用对象坐标获得层和数组的名称。然后，我们的想法是打开/关闭开关按钮，它将向初始地图添加/删除图层，从数据库中获取坐标，并将它们放在地图的顶部

是否可以使用svg创建这样的功能

我的想法是，每一层都应该有带有

标记的分组多边形，每个多边形都应该有唯一的类，这样我就知道它是什么对象了。这是正确的方法吗

---

是的！这在任何现代javascript框架中都是可能的。我建议使用JSX（比如React），这使得使用动态SVG更容易

下面是一些用于隐藏层的伪代码：

function MapLayers() {
  return (
    <svg>
      {layerTwoIsOn && <g>/* layer 2 shapes here */</g>}
      {layerOneIsOn && <g>/* layer 1 shapes here */</g>}
    </svg>
  );
}

函数映射层（）{
返回(
{layerTwoIsOn&&/*此处为第2层形状*/}
{layerOneIsOn&&/*此处为第1层形状*/}
);
}