jsco Posted January 15, 2020 Share Posted January 15, 2020 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) See the Pen zYxLjrZ?editors=1010 by jescowuester (@jescowuester) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2020 Share Posted January 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
jsco Posted January 15, 2020 Author Share Posted January 15, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now