title: Point in Polygon check with SVG and JavaScript?
body: <p>I have a map that I converted from a raster graphic into an SVG file by converting the differently coloured areas into paths.</p>
  
  <p>I know how to do a basic point-in-polygon check given an array of edges, but the <code>svg:path</code> elements represent multiple polygons as well as masks (to account for seas etc) and extracting that information by parsing the <code>d</code> attribute seems rather heavy-handed.</p>
  
  <p>Is there a JS library that allows me to simplify that check? I basically want to create random points and then check whether they are on land (i.e. inside the polygons) or water (i.e. outside).</p>
  
  <p>As SVG elements seem to allow for mouse event handling, I would think that this shouldn't be much of a problem (i.e. if you can tell whether the mouse pointer is on top of an element, you are already solving the point-in-polygon problem).</p>
  
  <p>EDIT: Complicating the matter a bit, I should mention that the <code>svg:path</code> elements seem to be based on curves rather than lines, so just parsing the <code>d</code> attribute to create an array of edges doesn't seem to be an option.</p>
  
  <p>As the elements can take a <code>fill</code> attribute, a ghetto approach of rendering the SVG on a canvas and then finding the colour value of the pixel at the given point could work, but that seems like a really, really awful way to do it.</p>