Convert PATH from SVG to POLYLINE

Question

I am creating an algorithm and I need your help. I have this vector file (SVG) and I would like to know if is there a way I can export/convert this image to polylines SVG only without arc, besier...?

Something like this:

Think about a circle with radius N. I would like a JS script to convert this circle path to multiple lines (which I could define as many as I want) in such a way that those lines represent the outline of the circle. I just would like to know the start X,Y and end X,Y coordinates of every line so I could export it to a txt file like this:

0,0 100,100 (which means draw a line from 0,0 to 100,100) 100,100 200,200 (which means draw a line from 100,00 to 200,00) ... .. -100,100 0,0 (finishes the circle by drawing the last line from -100,100 to 0,0).

How could I do that? I know polyline in SVG does that, so how can I grab an SVG image that makes use of "PATH" and make it use ONLY POLYLINE?

Paul LeBeau · Accepted Answer · 2017-03-17T17:20:15.543

11

The process you are talking about is generally called "flattening". It is what every 2D vector library does as part of rendering.

You should be able to find plenty of info on it if you search on that term.

If you are running in an environment with access to the SVG DOM (like a browser), you could also use the handy getPointAtLength() function available on path elements.

var  numPoints = 16;

var  mypath = document.getElementById("mypath");
var  pathLength = mypath.getTotalLength();
var  polygonPoints= [];

for (var i=0; i<numPoints; i++) {
  var p = mypath.getPointAtLength(i * pathLength / numPoints);
  polygonPoints.push(p.x);
  polygonPoints.push(p.y);
}

var  mypolygon = document.getElementById("mypolygon");
mypolygon.setAttribute("points", polygonPoints.join(","));

path {
  fill: none;
  stroke: black;
  stroke-width: 0.5;
}

polygon {
  fill: none;
  stroke: green;
  stroke-width: 0.5;
}

<svg viewBox="0 0 100 100">
  <path id="mypath" d="M 10,50
                       C 0 0 60 0 80,30
                       C 100,60 20,100 10,50"/>
  <polygon id="mypolygon" points=""/>
</svg>

edited Mar 17 '17 at 17:20

answered Sep 09 '16 at 07:07

Paul LeBeau

97,474
9
154
181

THAT'S FREAKING AWESOME MAN!!!! I SPENT THE LAST NIGHT STUDYING THIS and forgot to come there to STACKOVERFLOW and check if someone had helped. YOU ARE AMAZING! I thank you so much, I just tested my algorithm with your script and it worked PERFECTLY! I dont get why my question got 2 downvotes but anyway, your help was amazing! – Samul Sep 09 '16 at 13:13
Just a final question @Paul! Check this https://jsfiddle.net/61zjh2L5/1/ why is the polygon connecting the last point to the first? In the original drawing it's an "open object" without closing the first point with the last. How can I prevent this? – Samul Sep 09 '16 at 13:31
It is because you are using a `` which automatically connects the last point to the first one. You need to switch to a ``, which is for open shapes. You will also need to make one or two other changes: the for loop, and the CSS rule. https://jsfiddle.net/61zjh2L5/2/ – Paul LeBeau Sep 09 '16 at 13:44
amazing man, I just changed the element polygon to polyline and changed the class element from polygon to polyline and it worked perfectlly! No other changes needed thank you! – Samul Sep 09 '16 at 14:20
You may need to change the for loop also, otherwise your polyline will probably stop short of the end of your path. – Paul LeBeau Sep 09 '16 at 16:45
if you could help me into this I would apprectiate: http://stackoverflow.com/questions/39522130/getpointatlength-with-svg-not-working-correctly – Samul Sep 16 '16 at 00:18

Convert PATH from SVG to POLYLINE

1 Answers1

Linked