Jump to content

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

SVG path stringToRawPath and rawPathToString (MotionPathPlugin)

Recommended Posts


SVG/GSAP question :)
Why the end of the d value is like this ?
The "C curveTo " have 18 arguments  for 6 (C x1 y1, x2 y2, x y) ?
Anyway to "normalize" this? 

See the Pen YzrXGpL?editors=1111 by benoitwimart (@benoitwimart) on CodePen

Link to comment
Share on other sites

Hi Benoit, apologies if I'm misunderstanding. But I think you're asking why there aren't any more commands after the C when there are more than 6 arguaments?

If so - 


The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row, so you actually have three 'C - curveTo' commands, each with 6 arguments.

  • Like 3
Link to comment
Share on other sites

Thank you @Cassie (I looked at your site last night and now you are answering my question :))
I work with SVG and opentypeJS, so I need to format my path.
So I will make a split regex replace swip wizzz function to deal with this.

  • Like 2
Link to comment
Share on other sites

What a coincidence

Good luck down the regex mines!

Link to comment
Share on other sites

function isNum(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }

let  d= "M23,80.5 C48,64.83333 73,49.16667 98,33.5 80.16667,28.5 62.33333,23.5 44.5,18.5 53.16667,49.16667 61.83333,79.83333 70.5,110.5 ";

d = d.trim().replaceAll(/([A-Z])+/ig, "$1 ");
d = d.replaceAll(/,/ig, " ");

d = d.split(' ')

let format = {"C":7,"M":3,"L":3,"V":2,"H":2,"Q":5,"Z":0};

d.forEach((e,i) => {
      if(isNum(d[i+format[e]])) d.splice(i+format[e], 0, e);

Pretty Ugly :)

  • Like 2
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.