在 svg 图像上添加图层答案

【问题标题】：Adding Layers on top of svg image在 svg 图像上添加图层
【发布时间】：2019-11-01 02:52:10
【问题描述】：

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

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

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

我的想法是每个层都应该有带有<g> 标签的分组多边形，每个多边形应该有唯一的类，所以我会知道它是什么对象。这是正确的做法吗？

【问题讨论】：

标签： javascript html css mongodb svg

【解决方案1】：

是的！任何现代 javascript 框架都应该可以做到这一点。我推荐一个使用 JSX（如 React）的，这使得使用动态 svg 更容易。

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

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

【讨论】：