使用SVG和JavaScript检查多边形中的点？

我有一张地图，通过将不同颜色的区域转换为路径，将其从光栅图形转换为SVG文件

我知道如何在给定一组边的情况下进行多边形检查的基本点，但是

svg:path

元素表示多个多边形以及遮罩（用于说明seas等），并且通过解析

d

属性来提取该信息似乎相当繁琐

是否有一个JS库允许我简化检查？我基本上想创建随机点，然后检查它们是在陆地上（即多边形内部）还是在水上（即外部）

由于SVG元素似乎允许鼠标事件处理，我认为这应该不是什么大问题（即，如果您可以判断鼠标指针是否位于元素顶部，那么您已经解决了多边形中的点问题）

编辑：让事情有点复杂，我应该提到

svg:path

元素似乎基于曲线而不是直线，因此仅仅解析

d

属性来创建边数组似乎不是一个选项

---

由于元素可以采用

fill

属性，在画布上渲染SVG，然后在给定点查找像素的颜色值的贫民区方法可能会奏效，但这似乎是一种非常非常糟糕的方法。

我建议的作为最后手段的方法似乎是解决此问题的最简单方法

我发现这使得在画布上渲染SVG变得很容易。呈现SVG后，只需在要检查的点调用1x1区域的2D上下文的

getImageData

方法。如果您的SVG比我正在使用的SVG更复杂（您必须逐字节检查RGBA值），我想创建一个带有颜色编码的SVG副本将有助于检查

当您实际检查光栅图像的像素时，这感觉非常粗糙，但性能似乎足够好，颜色检查可以以允许杂质的方式写入（例如，在边缘附近）

我想如果你想要相对坐标，你可以尝试创建一个1:1大小的画布，然后将像素坐标除以画布尺寸

---

如果有人提出更好的答案，我会接受。在那之前，这一个可以作为一个占位符，以防有人带着同样的问题来到这里寻找一个简单的解决方案。

上的答案可能会帮助您完成这一任务。缺少浏览器支持会有一些问题，但您可能可以使用svgroot.checkcrossion来进行一个小测试（可能甚至可以使用0宽度/高度？）多边形形状中的矩形。

在完成SVG规范并花了一个小时使用Chrome的JavaScript控制台之后，最大的问题似乎是我有一个

SVG:path

元素，而不是一个常规的形状元素。否则，可以将

svg.checkIntersection

与1x1

svg:rect

一起使用（假设它适用于区域而不是轮廓）。如果您正在寻找任何形式的抽象，SVG API似乎没有什么帮助。如果您试图发现用户的点击，SVG pathnodes会触发该事件。另外，iecanvas没有模拟getImageData，我遇到了这个问题。