CODEWITHSUNDEEP
javascriptregexsvg
dorjeduck
dorjeduck

Reputation: 7794

Extract x,y coordinates from arbitrary SVG path with javascript

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

Upvotes: 11

Views: 16632

Answers (3)

Robert Longson
Robert Longson

Reputation: 123985

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;

Upvotes: 12

Tafari
Tafari

Reputation: 3059

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

Upvotes: 0

Manolo
Manolo

Reputation: 26350

This could be your regex:

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

Upvotes: 2

Related Questions