Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert path to polygon

I'm trying to figure if a point is in a SVG path using Python.
The algorithm that I'll use is the raycasting algorithm.

But for this algorithm i need to have the polygon sides, but all I have is the the pathdata for the svg path:

<path
   d="m 362.26878,978.51017 c 20.15947,-20.15479 23.0826,-25.35876
        20.51836,-36.58367 -5.62899,-24.66928 -8.85902,-84.94939
        -4.6845,-87.51832 2.29504,-1.43086 25.27371,2.13445 51.0669,7.87678
        39.48315,8.80707 50.0611,13.213 66.91495,27.88988 11.39966,9.91685
        25.01402,17.41113 31.62525,17.41113 12.91547,0 24.69288,-11.04544
        19.95645,-18.71919 -1.68587,-2.73893 4.50508,-38.63785 13.76077,-79.78795
        12.41964,-55.21781 16.82552,-85.81829 16.82552,-116.84379 0,-23.12039 … z" />

that corresponds to this image:

SVG Path example

So, is there a way to get the sides of a path?

like image 304
patrick Avatar asked Nov 11 '11 09:11

patrick


People also ask

How do you make a SVG polygon?

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. To draw a polygon in HTML SVG, use the SVG <polygon> element. The <polygon> element creates a graphic containing at least three sides. The points attribute is the x and y coordinates for each corner of the polygon.

What is SVG polygon?

SVG Polygon - <polygon>The <polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up). Polygon comes from Greek.

How does SVG path work?

It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command. The path will move to point ( 10 , 10 ) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.


1 Answers

You can convert a path into a polygon as shown in my example here:
http://phrogz.net/svg/convert_path_to_polygon.xhtml

The simpler algorithm from that page (in JavaScript) is:

function polygonSampledFromPath(path,samples){
  var doc = path.ownerDocument;
  var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');

  var points = [];
  var len  = path.getTotalLength();
  var step = step=len/samples;
  for (var i=0;i<=len;i+=step){
    var p = path.getPointAtLength(i);
    points.push( p.x+','+p.y );
  }
  poly.setAttribute('points',points.join(' '));
  return poly;
}

Instead of sampling based on a certain number of points, you may wish to simply sample at a particular distance.

This assumes that your Python binding has access to the full SVGPathElement DOM Interface.

like image 171
Phrogz Avatar answered Sep 30 '22 11:09

Phrogz