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 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;
This could be your regex:
var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With