如何知道svg路径上是否有任何x或y点

我有一个svg路径，我想知道我的鼠标是否在svg路径上，如果它是我想将光标更改为鼠标指针。

这可以通过在路径上添加鼠标hover属性并且使用识别点（x，y）在svg路径内或使用此解决方案外部来轻松完成。

但有一个扭曲，我有另一个透明层，因为我不能有这两个解决方案。

现在我正在制作顶层显示无，它工作正常。 但是因为这个我的鼠标指针和我做的动作，比如在鼠标移动时移动某个元素很慢，

因此我想知道是否有任何其他更好的方法，而不使显示等于没有。

请找到小提琴示例，我想将光标更改为指针，当它在mypath元素上时也希望myline应该移动，因为我将鼠标移动到图层上，我可以暂时在图层上显示无，但我注意到了火狐，线条运动不是那么顺畅，

https://jsfiddle.net/shyam_bhiogade/9a7zuou2/6/

Answer 1

我使用了https://bl.ocks.org/mbostock/8027637给出的解决方案，它返回路径中x和y点的距离，如果距离小于1px或笔画宽度，我认为x和y点在路径上。

  function closestPoint(pathNode, point) { var pathLength = pathNode.getTotalLength(), precision = 8, best, bestLength, bestDistance = Infinity; // linear scan for coarse approximation for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) { if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) { best = scan, bestLength = scanLength, bestDistance = scanDistance; } } // binary search for precise estimate precision /= 2; while (precision > 0.5) { var before, after, beforeLength, afterLength, beforeDistance, afterDistance; if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { best = before, bestLength = beforeLength, bestDistance = beforeDistance; } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { best = after, bestLength = afterLength, bestDistance = afterDistance; } else { precision /= 2; } } best = [best.x, best.y]; best.distance = Math.sqrt(bestDistance); return best; function distance2(p) { var dx = px - point[0], dy = py - point[1]; return dx * dx + dy * dy; } }