Extract x,y coordinates from arbitrary SVG path with javascript

Question

I want to replace the coordinates within a SVG path with variables. (with javascript). While svg path could be of many types it would be of great help to get some support on a concrete example:

d = "M27,0C27,21,4,34,-13,23C22,18,-27,9,-27,0";

I want this SVG path to be transformed into

var x = [];
var x[0] = 27; x[1] = ...

d = "M + x[0] + "," + y[0] 
    + "C" 
    + x[0] + "," + y[0] + ","
    + x[1] + "," + y[1] + ","
    + x[2] + "," + y[2] + ","
    + "C" 
    + x[3] + "," + y[3] + ","
    + x[4] + "," + y[4] + ","
    + x[5] + "," + y[5];

So my problem is to find the proper javascript RegExp to extract all the variables and by use of it generate the SVG path as given.

What I actually do is creating a Javascript object representing a given svg and I want to able to set the coordinates individually.

Any help highly appreciated

thx, martin

UPDATE: next to the accepted answer there is also a very handy method in the wonderful raphael.js library to analyze a SVG path

http://raphaeljs.com/reference.html#Raphael.parsePathString

Just split it by comma and use individual items from resulting array. — anubhava, Nov 07 '13 at 09:47
Thanks, problem is 23C22 with which kind of starts things getting messy. (and of course here i have only a simple svg path example) — dorjeduck, Nov 07 '13 at 09:51
possible duplicate of [Scripting data in SVG (reading and modifying)](http://stackoverflow.com/questions/8053487/scripting-path-data-in-svg-reading-and-modifying) — Robert Longson, Nov 07 '13 at 10:01
Thanks Robert, that link for sure includes what i was looking for. Can you please post as an answer so I can approve it. That makes it more likely that people who stumble over this question find the link. Thanks agai — dorjeduck, Nov 07 '13 at 11:08

score 12 · Accepted Answer · edited May 23 '17 at 11:46

12

Just use the SVG DOM to parse it there are more details in this question/answer but basically you do

var segments = path.pathSegList;

and that gives you an array of segments and values you can read or write e.g.

segments.getItem(0).y = -10;

edited May 23 '17 at 11:46

Community

1
1

answered Nov 07 '13 at 11:18

Robert Longson

118,664
26
252
242

1

Alternative for deprecated SVG pathSegList http://stackoverflow.com/questions/34352624/alternative-for-deprecated-svg-pathseglist – Alexei Zababurin Jan 15 '16 at 16:57

Manolo · Answer 2 · 2013-11-07T09:56:39.350

2

This could be your regex:

var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");

edited Nov 07 '13 at 09:56

answered Nov 07 '13 at 09:47

Manolo

24,020
20
85
130

Thanks, unfortunately not that easy as the path can contain "23C22" nasty things like that (start of a new cubic spline) – dorjeduck Nov 07 '13 at 09:50
What variables do you want to create from "23C22", f.e. – Manolo Nov 07 '13 at 09:53
23 is the y[2] variable in the above example, C stands as it is an 22 will be the x[3] variable – dorjeduck Nov 07 '13 at 09:54
thx a lot - as Robert Longson kindly gave a more complete answer I accepted his answer - thanks again – dorjeduck Nov 07 '13 at 11:55
Yes but that answer no longer works thanks to deprecation, and I for one am not getting on with trying to use the mentioned alternative. – Thomas Poole Apr 29 '17 at 02:38

Tafari · Answer 3 · 2013-11-07T10:07:46.573

0

I'm just learning JavaScript so I'm unable to help with the transforming thing, but this regex should help:

\-?\d+

It captures all of the coordinates from the string you have provided, while avoiding characters [a-zA-Z].

But I can provide some more-or-less code in Java which would do the job.

Pattern p = Pattern.Compile("\-?\d+");
Matcher m = p.matcher(yourPathString);
while(m.Find())
    \\add the match to your new table or something you want

edited Nov 07 '13 at 10:07

answered Nov 07 '13 at 09:54

Tafari

2,639
4
20
28

thanks - as I got an answer for my overall problem I accepted that answer and don't have to implement it myself - thanks again – dorjeduck Nov 07 '13 at 12:02
That was an answer for your overall problem but not the exact question you asked. These attempts to answer your original question , when you thought you would have to parse the string yourself, are still credit-worthy. They might be useful to others that browsed here. Your preferred solution has been deprecated and no longer works, by the way. – Thomas Poole Apr 29 '17 at 02:40

Extract x,y coordinates from arbitrary SVG path with javascript

3 Answers3

Linked