Good day dear. Tell me who knows the analogue of the library https://greensock.com/morphSVG is only free. It is necessary to change the path form of the SVG element from one to another using JS

  • It is more or less free ... - Qwertiy ♦
  • I have my own script that changes path d. jsfiddle.net/yuri_spivak/ws4xknot - Yuri
  • @Yuri works beautifully, but the SVG code would be several times shorter. - Alexandr_TT
  • @Alexandr_T, I do not argue :) - Yuri

1 answer 1

First of all, the development of Dmitry Baranovsky (Dmitry Baranovskiy) snapsvg.io

Unfortunately, he closed the support of his other, earlier Raphaël library.

Here is an interesting example of how to do what you want using snapsvg - Elastic SVG Elements

I remembered that Raphaël’s support remained on the githaba.

The development of Oleg Solomka mojs - has appeared recently, but is actively used judging by the number of examples on the codepen.

An example is there .

Velocity.js and there are still a lot of libraries to transform SVG.

UPD 01/19/2017

15 JavaScript libraries for SVG animation

You can do the transformation of the figures manually, believe it is not difficult. The main condition is that the number of points in all sub-paths - M0.50 L50.0 L100.50 matches the number.

<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"> <title> The path line</title> <desc> The path line http://svg-art.ru </desc> <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>