我有一张地图，通过将不同颜色的区域转换为路径，我将它从光栅图形转换为 SVG 文件。
我知道如何在给定边缘数组的情况下进行基本的多边形点检查，但是这些svg:path元素表示多个多边形以及掩码（以考虑海洋等），并且通过解析d属性来提取该信息似乎相当笨拙。
是否有一个 JS 库可以让我简化检查？我基本上想创建随机点，然后检查它们是在陆地上（即多边形内部）还是水（即外部）。
由于 SVG 元素似乎允许处理鼠标事件，我认为这应该不是什么大问题（即，如果您可以判断鼠标指针是否位于元素顶部，那么您已经在解决指向性问题了多边形问题）。
编辑：使事情复杂一点，我应该提到svg:path元素似乎基于曲线而不是线条，因此仅解析d属性以创建边缘数组似乎不是一种选择。
由于元素可以采用fill属性，因此在画布上渲染 SVG，然后在给定点查找像素的颜色值的 ghetto 方法可能会起作用，但这似乎是一种非常非常糟糕的方法。
Hit-testing SVG 形状的答案？可以帮助你完成这个任务。缺少浏览器支持存在问题，但您也许可以使用 svgroot.checkIntersection 来测试多边形形状内的一个小（甚至可能是 0 宽度/高度？）矩形。
我作为最后手段建议的方法似乎是解决这个问题的最简单的方法。
我找到了一个不错的 JS 库，它可以很容易地在画布上渲染 SVG。渲染 SVG 后，只需getImageData在要检查的点调用 1x1 区域的 2D 上下文方法。我想如果您的 SVG 比我使用的更复杂（您必须逐字节检查 RGBA 值），创建带有颜色编码的 SVG 副本会有助于检查。
当您实际上是在检查光栅图像的像素时，这感觉非常糟糕，但是性能似乎足够好，并且可以以允许杂质（例如边缘附近）的方式编写颜色检查。
我想如果你想要相对坐标，你可以尝试创建一个 1 比 1 大小的画布，然后将像素坐标除以画布尺寸。
如果有人提出更好的答案，我会接受它。在此之前，它会作为一个占位符，以防有人带着同样的问题来到这里寻找简单的解决方案。