Question

我关闭了该国的省份SVG路径。

如何通过javascript识别点（x，y）在SVG路径内部还是外部？

Answer 1

致电文件。elementFromPoint。如果位置在路径中，那么它将返回该元素。如果未填充路径，则可能需要调整pointer-events属性以使其正常工作。

Answer 2

对于SVGGeometryElement（包括路径和基本形状），有SVGGeometryElement.isPointInStroke()和SVGGeometryElement.isPointInFill()方法。他们返回给定点是在笔触中还是在填充中。

编辑：感谢@Arlo指出我的示例不适用于Chrome。即使MDN在文档页面上使用了DOMPoint，Chrome也不支持。您需要使用SVGPoint（这更有意义，因为SVG具有自己的坐标系）。

示例：

const svg = document.getElementById("your-svg");
const path = document.getElementById("your-path");

let point = svg.createSVGPoint();
point.x = 40;
point.y = 32;

console.log(path.isPointInStroke(point)); // shows true
console.log(path.isPointInFill(point)); // shows false

<svg id="your-svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 10, 150 110 S 80 190, 40 140 Z" stroke="yellowgreen" stroke-width="5" fill="#adff2f77" id="your-path"/>
  
  <!-- only to show where the point is -->
  <circle id="stroke-point" cx="40" cy="32" r="2.5" fill="red" />
</svg>

请注意，（根据MDN）目前尚不知道Internet对 ~~Edge和~~ ¹的支持。

¹根据MDN，Edge≤79支持isPointInStroke()和isPointInFill()。

识别点（x，y）在svg路径内或外部

2 个答案: