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:
So, is there a way to get the sides of a path?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With