Jump to content
Search Community

Combine multiple path elements into one (motionpathplugin)

jsco test
Moderator Tag

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

Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...