I need a function or plugin that converts path mands for an SVG path to polygonal points.

I found one :

The problem here is it does not support arcs and curves like A and C.

let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10';
let points = pathDataToPolys(pathData, {tolerance:1, decimals:1});
console.log(points);
/*******************************************************************
[
  [ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ]
]

I need a function or plugin that converts path mands for an SVG path to polygonal points.

I found one : https://github./Phrogz/svg-path-to-polygons

The problem here is it does not support arcs and curves like A and C.

let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10';
let points = pathDataToPolys(pathData, {tolerance:1, decimals:1});
console.log(points);
/*******************************************************************
[
  [ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ]
]

I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. I need this to be converted to polygon points.

Any help or suggestions highly appreciated.

• javascript
• svg
• polygon

• Here's some alternate JS to try: gist.github./alexjlockwood/c037140879806fb4d9820b7e70195494 – Paul LeBeau Commented Nov 20, 2018 at 14:02
• Just to be sure, you do realize that polygons don't support curves, right? If so, you are looking for something that will convert a curve into a series of short lines? – Ted Commented Nov 20, 2018 at 15:28
• I use Three.js for that – Stranger in the Q Commented Nov 20, 2018 at 16:20
• @PaulLeBeau I think its for converting shapes to paths ?? – user10519853 Commented Nov 21, 2018 at 5:22
• 1 Is there nothing as such to convert path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. I need this to be converted to polygon points. – user10519853 Commented Nov 21, 2018 at 6:24

1 Answer 1

I think there is some confusion because it is not clear what sort of conversion you are looking for. There are two solutions with different levels of difficulty.

1. Flattening. Flattening is a term used by 2D renderers for a step in the process of rendering. The flattening algorithm is adaptive. It will space the polygon points closer together when the path has a high curvature. And it will use fewer points when the path is straighter.

2. Simple conversion. You can just step along the curve at regular intervals and sample the path location at each step.

The example code and output, you provide in your question, makes it look like you want the Flattening type.

However, if you are not fussy, then option 2 is really easy. SVG includes an API designed for this task.

var NUM_POINTS = 6;

var path = document.getElementById("test");
var len = path.getTotalLength();
var points = [];

for (var i=0; i < NUM_POINTS; i++) {
    var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
    points.push([pt.x, pt.y]);
}

console.log("points = ", points);

<svg>
  <path id="test" d="M5,15 c5.5,0 10-4.5 10,-10 h10"/>
</svg>