Svg.js: Difficult to sync paths which different shapes using SVG.js morphing functions

[marciosalinodias]

Hello my friends.

There is a plugin called ApexCharts.js that uses your lib to draw charts with SVG.
What happen that i opened a Issue with them to validate a behavior from a chart that have two elements but there is no synchronism between them.
The answear that i received is that your lib have a difficult way to sync differents objects on animations.

My point is:
There is a way to make it work properly?
Can i make a pull request to ajust the right way in Apex to use your lib?

Below, the answear that i received:

I understood your point.

Both the line and area paths are drawn separately as both have different 
calculations. 
Now, to animate the previous path with the next path, I morph it using SVG.js 
morphing functions. These morphing functions are difficult to sync paths which 
have different shapes (in this case, line and area have different shapes although 
they look similar).

So, I won't be able to help much as I rely on 3rd party SVG.js for morphing 
animation.

What you need, you have it with me.

[Fuzzyma]

Which version of svg.js is used? What do you mean by "sync"? Are the path animations out of sync? In which way? Do you have a fiddle which shows the issue?

[junedchhipa]

After further digging the root of the issue, I can say the problem is not with SVG.js, but the drawings in ApexCharts itself.

@Fuzzyma For your reference, this is the jsfiddle of the issue - https://jsfiddle.net/marciosalinodias/3rwdbptx/

As you see, the line and area are two different paths in that SVG. And although they look similar, there is some difference in morphing when they animate. As they both follow different paths, it's difficult to make them look similar (in sync) when morphing.

@Fuzzyma You may close this issue here as I suspect the problem is not fixable on your side too.
@marciosalinodias I will think of a workaround and update you on the same thread of ApexCharts.

[Fuzzyma]

To animate both paths in a similar manner just make sure that the coordinates of their points line up correctly. Only use same commands. E. G. Don't animate a beziere in one path and a line in the other. Make it both bezieres. Make the paths as similar as possible (not in their appearance but in their code). That alone should help to smooth that out a lot

[marciosalinodias]

@Fuzzyma Thanks for your help and time! I appreciated your fast answer.
@junedchhipa Thanks for your contribution in this thread, we keep contact in ApexCharts issue