1

Есть SVG карта созданная на Raphael. Как можно анимировать маршрут между двумя кликами на карте, как например здесь

Пример на картинке -

На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то примеры?

3
  • Что такое "анимировать" в вашем понимании, как это должно выглядеть?
    – Kromster
    10 ноя 2020 в 9:51
  • Выделение цветом, как на картинке.
    – Sergey
    10 ноя 2020 в 11:29
  • Разве же это "анимация"? Это просто цвет ..
    – Kromster
    10 ноя 2020 в 12:17

2 ответа 2

1

Есть такая библиотека OpenLayers. Она может помочь. Приведу ссылки на три примера.

  1. Анимация линий (анимация полётов).

  2. Анимация передвижения по траектории. Тут надо нажать на кнопочку Start animation.

  3. Анимация перехода к точке. Тут надо нажать на кнопочку Take a tour.

1
  • К сожалению не подходит, у меня своя SVG-карта.
    – Sergey
    13 ноя 2020 в 13:30
1

На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то примеры?

В svg подобных API для рисования карт нет. Но сделать анимацию прокладки маршрута можно.

И совсем не обязательно рисовать SVG карту, можно взять фрагмент растрового скриншота и нарисовать маршрут в векторном редакторе:

Для этого инструментом - рисовать кривые Безье и прямые линии наносите узловые точки вдоль маршрута

введите сюда описание изображения

Сохраняете файл и копируете path маршрута.

Вычисляете длину маршрута с помощью getTotalLength() в вашем случае = 801px

Далее пишите команду анимации изменения stroke-dashoffset от максимума до нуля, обеспечивая тем самым рост линии от нуля до максимума.

Анимация начнется после клика. Откройте на полный экран.

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="889" height="514" viewBox="0 0 889 514" preserveAspectRatio="xMinYMin meet" border="1">
      <!-- скриншот карты -->
  <image xlink:href="https://i.stack.imgur.com/J7iG0.png" height="100%" width="100%"/>
  
  <path stroke-dasharray="801" stroke-dashoffset="801"  d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:red" stroke-width="6">
       <!-- Анимация маршрута -->
    <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="801;0" fill="freeze" />
  </path>
</svg>

UPDATE

Вариант с прокладкой маршрута пунктирной линией

Пунктирную линию невозможно анимировать с помощью изменения stroke-dashoffset, так линия уже заранее вся разбита на прерывистые участки длиной - 15px с пробелами 10px , - stroke-dasharray="15 10" и она просто будет постоянно бежать на всей длине линии.

Чтобы добиться эффекта постепенного роста пунктирной линии, нужно сначала её закрыть сверху и постепенно открывать с помощью анимации маски.

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="889" height="514" viewBox="0 0 889 514" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<mask id="msk">
<path stroke-dasharray="801" stroke-dashoffset="801"  d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:white" stroke-width="4">
 <!-- Анимация маршрута маски -->
    <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="801;0" fill="freeze" />
</path> 
</mask>
</defs> 
 <!-- скриншот карты -->
  <image xlink:href="https://i.stack.imgur.com/J7iG0.png" height="100%" width="100%"/>
     <!-- Изначально скрытый маской маршрут движения -->
  <path stroke-dasharray="15 10" mask="url(#msk)"   d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:red" stroke-width="4">
      
  </path>
</svg>

3
  • Как сделать по заранее определенному маршруту мне понятно, вопрос как нарисовать маршрут между двумя кликами на карте SVG, где уже нарисованы дороги, то есть нужен алгоритм поиска и отрисовки кратчайшего маршрута между кликами на карте как на яндекс или гугл картах. Есть ли такой алгоритм или принцип его построения или нужно делать ручками с нуля?
    – Sergey
    10 ноя 2020 в 13:42
  • @Sergey в SVG нет переменных, куда бы запоминались геокординаты клика на карте, поэтому теоретически невозможно построить кривую между двумя кликами. Это возможно лишь в JS 10 ноя 2020 в 13:48
  • Это возможно лишь в JS – это само собой.
    – Sergey
    10 ноя 2020 в 14:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.