Анимация контуров фигур svg

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

Я делаю анимацию контуров, но есть один элемент, у которого я не могу анимировать
 контур, поэтому  хотел бы спросить ваше мнение, как это можно сделать иначе кроме
анимации заливки?







    

Ответы

Ответ 1

Контуры кругов, соединяющих отрезков, стрелки нарисованы в Inkscape
В тегах  посчитана длина для каждого элемента схемы.
Длина рассчитывается с помощью команды js  getTotalLength() 
Ниже код для расчета, в него нужно подставлять свои значения path 



 
   
 
   




Пример схемы автора вопроса, сделанный в Inkscape     








Пример анимации схемы  






Ответ 2

Совместная анимация схемы и иконок

Код получился очень объемный, поэтому лучше опубликовать его по частям. 

Анимация - рисование линий основана на изменении атрибута строки - stroke-dasharray
от нуля до максимального значения. 

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




Анимация иконки письма показана ниже:    








Анимация иконки громкоговорителя   

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

Нескольким анимациям присваиваются уникальные идентификаторы: id="sp1", id="sp2",
id="sp3"    

      

       

           


У иконки громкоговорителя три волны, анимация второй волны начинается после окончания
анимации первой волны:  

 begin="sp1.end"   


Возврат к первой анимации волны после окончания третьей анимации:    

begin="speak.end;sp3.end"    


Ниже весь код анимации :  








Собираем все элементы - части схемы и иконки:     

Техника последовательных и параллельных анимаций позволяет очень гибко настроить
логику схемы.   

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

Одновременный запуск двух анимации достигается применением одного и того же id предыдущей
анимации ("an2.end"):  

  

    


Для встраивания иконок необходимо рассмотреть еще один момент    

SVG иконки бывают очень разные, чтобы разместить их в нужном месте схемы и с требуемым
размером, код иконки оборачивается во вложенные теги  
Это дает возможность масштабировать и позиционировать иконки с помощью атрибутов
svg - viewBox, width, height    



 




Ниже полный код всей коллекции последовательных и параллельных анимаций:   

Цветовую гамму можно легко изменить:  

   









Ответ 3

Анимация ссылки иконок

Код получился очень объемный, поэтому лучше опубликовать его по частям. 

Анимация - рисование линий основана на изменении атрибута строки - stroke-dasharray
от нуля до максимального значения. 

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




Анимация иконки письма показана ниже: