javascript - Convert PATH from SVG to POLYLINE - Stack Overflow

admin管理员组

文章数量:1279240

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?

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?

• javascript
• html
• svg

Share Improve this question Follow asked Sep 9, 2016 at 2:27 SamulSamul 2,07955 gold badges2828 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： javascriptConvert PATH from SVG to POLYLINEStack Overflow