Анимация маршрутов самолётов на растровой карте

#html #css #css3 #svg #анимация

Довольно просто найти   карты стран, городов, аэропортов в растровом формате, но
довольно проблематично отыскать или нарисовать самому в векторном формате, тоже самое
в svg.  

Например,- у меня есть файл *.png карты аэропортов Канады.    

    

Мне нужно сделать визуализацию прилёта самолетов в аэропорты различных городов.  

Я догадываюсь, что анимация траектории полета самолетов будет не прямолинейна, по
какому-то криволинейному патчу. Поэтому использовать СSS animation затруднительно. 

Вопрос:   

Как увязать точки на растровой карте с траекториями SVG, не будет ли рассогласование
расположений при изменении масштаба?

Можно ли совместить растровый формат и анимацию SMIL SVG? 
    

Ответы

Ответ 1

Вариант SVG


Чтобы не было рассогласования конечной точки криволинейного пути
траектории
движения самолётов и города на растровой карте, необходимо добавлять растровую карту
не c помощью  background свойства CSS или тега HTML , а внутри самого тега svg.      

        
Траекторию движения самолёта рисуем в векторном редакторе


      


Сохраняем файл в формате *.svg


Копируем из него патч траектории самолета, больше нам из файла ничего не нужно.     





Выбираем Юникод иконки самолета ✈ ✈      
Пишем команду анимации движения этой иконки вдоль криволинейного
пути:        




      ✈ 
    
    
    
    





Собираем всё вместе     


Ниже код анимации для пяти самолетов:    



    


 

LIVE DEMO  

Вариант с остановкой анимациии и повторным запуском

Добавляем кнопки "GO" и "STOP" старта и остановки анимации, на которые вешаем события
onclick=start() и  onclick=pause()   



let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
  


Ответ 2

Вариант CSS

Анимацию движения по криволинейному пути сделать очень затруднительно, теоритически
можно, но это будут простыни кодов. 
А вот стилизацию объектов SVG вполне легко реализовать.
 Преимущество этого метода вполне очевидно,- при больших проектах стили заменяются
в одном месте и нет необходимости многократно прописывать каждому патчу стили.            



svg path {
fill:none;
stroke:none;
}
#Halifax_Airplan, #Montreal_Airplan, #Montreal_Calgary {
font-size:30;
}

#Halifax_Airplan {
fill:gold;
} 
#Montreal_Airplan {
fill:black;
} 

#Calgary_Airplan {
fill:lightcyan;
}
 




Связанные топики по использованию Юникодов в анимации: 


Как создать pattern или path цепи вдоль линии   
Использование символов Юникода в анимации      
Анимация появления карты с прорисовкой границ и с последующей закраской внутри
Анимация наполнения карты контентом