Forum Academy Marketplace Showcase Pricing Features

Кейс - Интерактивный svg в Bubble

Ссылка для тестирования https://helper-2020.bubbleapps.io/svg

  1. Я вставляю HTML элемент в который помещаю код SVG картинки в которой есть области pach у которых обязательно должен быть id.

У этого HTML элемента обязательно нужно указать ID Attribute

  1. Вставляем на страницу элемент плагина svg_interactive в этом элементе мы можем указать:
  • Start JSON это json объект который отвечает за перерисовку основного svg. Эти данные я беру из базы и формирую нужный объект.
    -svg_ id = ID Attribute HTML элемента
  • список id path элементов к которым не нужно добавлять интерактивность.
  • свойства pach элемента при наведении
  • свойства pach элемента при клике
    -также у нашего svg_interactive элемента есть состояния которые меняются после каждого события

  1. Плагин включает в себя элемент, три события клик, наведение и покидание элемента, и два действия стартовая загрузка и обновление одного элемента.

  1. Наведение на path элемент
  2. Клик на path элемент
  3. Покидание path элемент
  4. Зная id элемента мы можем сохранить измененные данные в базу. Потом использовать эти данные для обновления выбранного элемента
  5. Например при наведении на элемент мы можем показывать данные из базы найденные по id

  6. При клике мы можем построить необходимую цепочку WF

Если у вас есть идеи пишите я подключу вам плагин для тестирования.

Это может быть карта мира или страны, атлас строения человека, машин и механизмов, схема загрузки/резервирования мест в кафе.

2 Likes

И самое главное, ссылка для тестирования https://helper-2020.bubbleapps.io/svg

1 Like

Добрый день. Подскажите как сделать карту мира? И возможно ли это?

Есть классный сервис http://pixelmap.amcharts.com/
Он поможет сгенерировать svg карту

Спасибо!