Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jsco

Combine multiple path elements into one (motionpathplugin)

Recommended Posts

I have an svg that is made out of multiple <path> elements. 

 

My Desired Solution :

the element (the blue rect) should travel from one side of the line to the other (like in the image I attached, which way doesn't matter for now, as long as it goes into one direction)

My Problem:

The line is made out of multiple <path> elements that all have different directions. I wasn't able to see common start/end coordinates for them either but my svg knowledge is still limited so I may just not know how to identify them.

 

What I tried

Currently I map over all the paths and create an animation for each one, but thats not ideal because they all have different directions and I will also have to calculate the speed. Ideally I'd want to combine all of them into 1 single path object.

 

I have no control over the svg I get (its parsed from word) and the solution needs to be dynamic (needs to work for all kinds of lines without manual work)
 

OnPaste.20200115-092317.png

See the Pen zYxLjrZ?editors=1010 by jescowuester (@jescowuester) on CodePen

Share this post


Link to post
Share on other sites

Hey jsco,

 

7 hours ago, jsco said:

I wasn't able to see common start/end coordinates for them either but my svg knowledge is still limited so I may just not know how to identify them.

This is the issue. If you try to animate the rectangle along the paths it will be jumpy and not a smooth animation because the paths are poorly formed and their endpoints don't match up. There's no way to fix the jumpiness without editing the paths. The first thing you should do is improve (or have someone improve) the exporting of the lines. This sort of line should optimally be done using one path with only two points and then an arc. 

  • Like 1

Share this post


Link to post
Share on other sites

In case someone else comes across this, what I do now is

1. get the start and endpoint of each path

2. see which one is closest to the first path

3. if its an endpoint I flip the path and connect the coordinates, if its a starting point I connect the coordinates as is (removing the M command at the beginning).

 

I couldn't find any library that does this so I created this.

should be able to handle most use cases but if anyone else wants to use it make sure to test it thoroughly first.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×