Добавление слоев поверх изображения SVG

Question

У меня есть идея создать карту с функциональностью слоев.

У меня есть исходное изображение карты в формате SVG. Я хочу добавить Слои к этому, и у каждого слоя должен быть набор объектов (координаты многоугольников). Когда я закончу рисовать полигоны, например. 1 слой, я хочу отправить координаты всех объектов в базу данных и сохранить их в Document (MongoDB), где у меня будет Имя слоя и массив с координатами объектов. Тогда идея состоит в том, чтобы включить / выключить кнопку переключателя, которая добавит / удалит слои на исходную карту, извлечет координаты из базы данных и поместит их поверх карты.

Можно ли создать такую ​​функциональность с помощью svg?

Моя идея состоит в том, что каждый слой должен иметь сгруппированные полигоны с тегом <g>, а каждый полигон должен иметь уникальный класс, поэтому я буду знать,что это за объект. Это правильный подход?

Answer 1

Да! Это должно быть возможно с любой современной структурой JavaScript. Я бы порекомендовал тот, который использует JSX (например, React), что облегчает работу с динамическими svgs.

Вот некоторый псевдокод для скрытия слоев:

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