Jump to content
Search Community

reverse direction of stroke

tailbreezy test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

I am searching for a way to reverse the direction of a SVG stroke. (exactly like in Illustrator or similar software).

 

It seems there was a method pathDataToBezier, on which you could call .reverse().

 

var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse();

 

This was suggest some time ago by @PointC but @ZachSaucier some time after suggested that this is no longer possible since gsap 3.

 

Is there still such a method in some of the plugins, it seems everything bezier/rawPath related moved to MotionPath plugin.

Link to comment
Share on other sites

@PointC has a blog post about this subject. It's good to do before you get into the code.

 

However you can edit the way that the animation happens along a path in code. With DrawSVG for example you can go from 100% to 0%. What are you trying to accomplish?

 

Also please stick with the default text formatting for paragraph text instead of the pre formatting that you're using above.

  • Like 1
Link to comment
Share on other sites

So, there isn't a method?

I know of at least a couple of ways to hack what I want to achieve, but thought this method would be a lot easier.

If this was in fact what it did.

 

from
d="M 25,50 C 25,100  150,100  150,50"
to
d="M 150,50 C 150,100  25,100  25,50

 

The paths could be more complex.

Link to comment
Share on other sites

14 minutes ago, ZachSaucier said:

Please answer my question if you'd like additional aid.

 

Thanks. Your answer indirectly answered my question. (there isn't such a method)

Which is all I have asked in the first place. Not really sure why we have to turn it into a game of Q&A.

 

Link to comment
Share on other sites

I would think you could use .getRawPath(), reverse the point pairs and then reverse the array. If you need it, you could then use .rawPathToString() to feed into a tween as the 'd' attribute. Though I'd say it's much easier to reverse DrawSVG or the MotionPath. Even easier to draw it in the desired direction in your vector software. Just my two cents. :)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Also it's easier to change the start and end position of a MotionPath animation or DrawSVG animation. So instead of misleading you and any future readers of this thread by answering your specific question, I opted to solve the actual issue that you're running into. But since you didn't share that with us, we couldn't help with the actual issue. Make sense?

  • Like 2
Link to comment
Share on other sites

1 hour ago, PointC said:

I would think you could use .getRawPath(), reverse the point pairs and then reverse the array. If you need it, you could then use .rawPathToString() to feed into a tween as the 'd' attribute. Though I'd say it's much easier to reverse DrawSVG or the MotionPath. Even easier to draw it in the desired direction in your vector software. Just my two cents. :)

 

Yep, you could totally do that (get the RawPath and reverse the points) - you'd just need to remember to flip-flop every other number because if you merely reverse() the array (and sub-arrays), you'll also invert the order of x, y, x, y, etc. (it'd become y, x, y, x, etc.) 

 

Like @ZachSaucier I'm very curious about the "why" behind your question - if you share that, it would really help us provide the best answer. I don't think he was trying to turn it into a game of Q&A as much as just trying to understand the context so he could offer the most helpful solution. 

  • Like 2
Link to comment
Share on other sites

1 hour ago, GreenSock said:

you'd just need to remember to flip-flop every other number

Understood. That's why I said reverse the point pairs and then reverse the array. :D

 

My first thought was flipping each x,y pair with a loop and then reversing the array. I don't know when I would need to do this, but I'm curious how it could be written in "Jack Doyle Super Fancy Code."

 

let points = [1, 2, 3, 4, 5, 6, 7, 8];
for (let i = 0; i < points.length - 1; i += 2) {
  let flipPoint = points[i];
  points[i] = points[i + 1];
  points[i + 1] = flipPoint;
}

console.log(points.reverse()); // [7, 8, 5, 6, 3, 4, 1, 2]

 

  • Like 1
Link to comment
Share on other sites

  • Solution

Yep, that's pretty much exactly what's in my own source code for that :)

function reverseRawPath(rawPath) {
  let i = rawPath.length;
  rawPath.reverse();
  while (i--) {
    reverseSegment(rawPath[i]);
  }
}
function reverseSegment(segment) {
  let i = 0,
      y;
  segment.reverse(); //this will invert the order y, x, y, x so we must flip it back.
  for (; i < segment.length; i += 2) {
    y = segment[i];
    segment[i] = segment[i+1];
    segment[i+1] = y;
  }
}

🙌

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks, Jack and PointC.

 

I mostly wanted to know how this could be done in gsap, since it does a lot of paths manipulation and this method had potential to do exactly that.

In the meantime I was looking at this npm utility. If anyone is interested in the same. It seems to be a little more involved in handling most of svg path commands.  It is nothing too complicated, just some regEx and array rearranging, but handles some edge cases.

https://github.com/Pomax/svg-path-reverse/blob/gh-pages/reverse.js

 

 

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...