title: Splitting any SVG path into pieces without changing the shape
body: <p>I am new to SVG manipulation using javacript. I would like to split any type of SVG path into <em>N</em> number of segments, so that the original shape stays same but with additional points added to the path. I was successfully able to convert a single cubic curve into <em>N</em> number of points using the <a href="http://pomax.github.io/bezierjs/" rel="nofollow noreferrer">Bezier JS</a> plugin using the <code>.getLUT(steps)</code> function.</p>
  <p>And I am able to convert any SVG element into path using <a href="https://gist.github.com/timo22345/9413158" rel="nofollow noreferrer">Flatten.js</a>.</p>
  <p>Here in the link <a href="http://bl.ocks.org/bycoffe/18441cddeb8fe147b719fab5e30b5d45" rel="nofollow noreferrer">http://bl.ocks.org/bycoffe/18441cddeb8fe147b719fab5e30b5d45</a> a path is splitted seamlessly, But I'm struggling to achieve the same using an existing path in an SVG element in the DOM.</p>
  <p>Here is my code:</p>
  <pre><code>...
  &lt;svg id=&quot;svg&quot; style=&quot;border: 1px solid&quot; width=&quot;500&quot; height=&quot;500&quot;&gt;
     &lt;!--The below is an actual rectangle drawn in illustrator--&gt;
     &lt;rect x=&quot;0.5&quot; y=&quot;0.5&quot; width=&quot;234&quot; height=&quot;125&quot; style=&quot;fill:#fff&quot;/&gt;
  
     &lt;path d=&quot;M317,107V231H84V107H317m1-1H83V232H318V106Z&quot; transform=&quot;translate(-83 -106)&quot;/&gt;
  &lt;/svg&gt;
  
  ...
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  
      //this converts the &lt;rect&gt; and &lt;path&gt; into a more clean path d attribute
      //the above code produces the below d attribute points
      //for &lt;rect&gt; - M0.5, 0.5 L 234.5,0.5 L 234.5, 125.5 L 0.5, 125.5 L 0.5, 0.5 Z
      //for &lt;path&gt; - M234, 1 L 234, 125 L 1, 125 L 1, 1 L 234, 1 m 1, -1 L 0,0 L 0, 126 L 235, 126 L 235,0 Z
  
      flatten(document.getElementById('svg')); 
      
  &lt;/script&gt;
  </code></pre>