title: Extract x,y coordinates from arbitrary SVG path with javascript
body: <p>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:</p>
  
  <pre><code>d = "M27,0C27,21,4,34,-13,23C22,18,-27,9,-27,0";
  </code></pre>
  
  <p>I want this SVG path to be transformed into</p>
  
  <pre><code>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];
  </code></pre>
  
  <p>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. </p>
  
  <p>What I actually do is creating a Javascript object representing a given svg and I want to able to set the coordinates individually.</p>
  
  <p>Any help highly appreciated </p>
  
  <p>thx, martin</p>
  
  <p>UPDATE:
  next to the accepted answer there is also a very handy method in the wonderful raphael.js library to analyze a SVG path</p>
  
  <p><a href="http://raphaeljs.com/reference.html#Raphael.parsePathString">http://raphaeljs.com/reference.html#Raphael.parsePathString</a></p>