Ссылка для тестирования https://helper-2020.bubbleapps.io/svg
- Я вставляю HTML элемент в который помещаю код SVG картинки в которой есть области pach у которых обязательно должен быть id.
У этого HTML элемента обязательно нужно указать ID Attribute
- Вставляем на страницу элемент плагина svg_interactive в этом элементе мы можем указать:
- Start JSON это json объект который отвечает за перерисовку основного svg. Эти данные я беру из базы и формирую нужный объект.
-svg_ id = ID Attribute HTML элемента - список id path элементов к которым не нужно добавлять интерактивность.
- свойства pach элемента при наведении
- свойства pach элемента при клике
-также у нашего svg_interactive элемента есть состояния которые меняются после каждого события
- Плагин включает в себя элемент, три события клик, наведение и покидание элемента, и два действия стартовая загрузка и обновление одного элемента.
- Наведение на path элемент
- Клик на path элемент
- Покидание path элемент
- Зная id элемента мы можем сохранить измененные данные в базу. Потом использовать эти данные для обновления выбранного элемента
- Например при наведении на элемент мы можем показывать данные из базы найденные по id
- При клике мы можем построить необходимую цепочку WF
Если у вас есть идеи пишите я подключу вам плагин для тестирования.
Это может быть карта мира или страны, атлас строения человека, машин и механизмов, схема загрузки/резервирования мест в кафе.