如何判断坐标点(x,y)是否位于SVG组元素内，解决isPointInFill对组ID无效问题

问题根因 #

isPointInFill() 和 isPointInStroke() 是 SVGGeometryElement 接口的专属方法，仅可用于 <rect>、<circle>、<polygon>、<path> 这类具备实际几何形状的SVG元素。而 <g> 组元素属于容器类的 SVGGElement 类型，本身没有独立的填充/描边区域，直接对组元素调用这两个方法必然不会返回正确结果。

解决方案 #

遍历目标组下的所有子几何元素，逐个判断点是否命中子元素的填充或描边区域，只要有任意一个子元素命中，即可判定点位于组的有效区域内。如果组设置了transform变换，需要先将全局坐标转换为组的本地坐标再做判断，避免坐标偏移导致判断错误。

你可以直接复用下面的工具函数适配组元素的判断逻辑：

// 工具函数：判断点是否在组的填充区域内
function isPointInGroupFill(groupEl, point) {
  // 处理组的坐标变换，将全局点转换为组本地坐标
  const localPoint = point.matrixTransform(groupEl.getScreenCTM().inverse());
  // 遍历所有子元素
  for (const child of groupEl.children) {
    // 只判断几何元素
    if (child instanceof SVGGeometryElement) {
      if (child.isPointInFill(localPoint)) {
        return true;
      }
    } else if (child instanceof SVGGElement) {
      // 递归处理嵌套的组
      if (isPointInGroupFill(child, localPoint)) {
        return true;
      }
    }
  }
  return false;
}

// 工具函数：判断点是否在组的描边区域内
function isPointInGroupStroke(groupEl, point) {
  const localPoint = point.matrixTransform(groupEl.getScreenCTM().inverse());
  for (const child of groupEl.children) {
    if (child instanceof SVGGeometryElement) {
      if (child.isPointInStroke(localPoint)) {
        return true;
      }
    } else if (child instanceof SVGGElement) {
      if (isPointInGroupStroke(child, localPoint)) {
        return true;
      }
    }
  }
  return false;
}

将你原有代码中循环判断组的部分替换为如下逻辑即可：

for (let id of element_ids) {
    const groupEl = document.getElementById(id);
    // 构造标准DOMPoint对象
    const globalPoint = new DOMPoint(point.x, point.y);
    // 调用工具函数判断
    const result = isPointInGroupFill(groupEl, globalPoint);
    const result2 = isPointInGroupStroke(groupEl, globalPoint);
    if (result || result2) {
        console.log(`Point at (${point.x}, ${point.y})- (circleID: ${circleID.id}): 命中填充=${result}, 命中描边=${result2}`);
    }
}

注意事项 #

• 如果你的组没有嵌套结构，也没有设置transform变换，可以删掉递归逻辑和坐标转换步骤，简化代码
• 对于<line>这类本身没有填充的元素，isPointInFill会始终返回false，符合SVG规范预期

内容的提问来源于stack exchange，提问作者Arif Ahmed