Библиотека js по изменению форм в SVG элементах

Question

Добрый день уважаемые. Подскажите кто знает аналог библиотеки https://greensock.com/morphSVG только бесплатный. Необходимо менять path форму у SVG элемента с одной на другую посредствам JS

Answer 1

Прежде всего разработка Дмитрия Барановского (Dmitry Baranovskiy) snapsvg.io

К сожалению он закрыл поддержку своей другой, более ранней библиотеки Raphaël

Вот интересный пример, как с помощью snapsvg делать, то, что вы хотите - Elastic SVG Elements

Вспомнил, что на гитхабе осталась поддержка Raphaël.

Разработка Олега Соломки mojs - появилась недавно, но активно используется судя по количеству примеров на codepen.

Пример там же.

Velocity.js и ещё есть достаточно много библиотек для трансформации SVG.

UPD 19.01.2017

15 JavaScript-библиотек для анимации SVG

Можно делать трансформацию фигур вручную, поверьте это не сложно. Главное условие, чтобы количество точек во всех подпутях - M0,50 L50,0 L100,50 совпадало по количеству.

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
  &lt;title&gt; The path line&lt;/title&gt;
&lt;desc&gt; The path line http://svg-art.ru  &lt;/desc&gt;


<circle cx="50" cy="50" r="50" stroke="grey" fill="greenyellow" />
  <path d="M0,50 L50,0 L100,50" stroke="dodgerblue" fill="dodgerblue" >
       <animate  dur="4s" repeatCount="indefinite"
     attributeName="d"
    values="M0,50 L50,0 L100,50;
            M0,50 L50,100 L100,50;
      M0,50 L50,0 L100,50;"/>
        </path>

 </svg>