Как анимировать path в svg?

Question

[Максим]

Все вопросы повторы которые есть на Тостер я посмотрел , есть реализации но нету объяснений !
Мне готовое решение не надо а надо понять : Каким образом происходит анимации SVG
Для примера , на многих сайтах (нету примеров так как видел не часто ) есть некие плюшки , типа по click/hover происходит изменение какого то контура SVG , СКАЖЕМ ТАК : был треугольник и по любому событию ... хоть самопроизвольно изменяется этот треугольник в круг , или звезда в книгу ,
Вот маленький пример на SVG где на SMIL я переделал из не управляемой конструкции в квадрат ,а то если из circle сделать rect то до меня не доходит что именно и как именно нужно делать , поясните плиз ...

Answer 1

[Евгений]

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

но! тема довольно хитрая и так просто имхо не объяснишь вот статейка - там много примеров с кодом...

вот пример трансформации - там в JS убери вставку gif'а и замедли анимацию <animate dur='xxx'> увидишь...