SVGGeometryElement.isPointInFill()在Chromium失效，Firefox正常，求兼容方案

问题根源 #

Chromium系浏览器（Chrome、Edge等）的SVGGeometryElement.isPointInFill()方法仅接受SVGPoint类型参数，而Firefox额外兼容了通用几何接口DOMPoint，这就是代码在Firefox正常运行、Chromium报错的核心原因。报错信息明确指出参数类型不符合要求，正好对应你用DOMPoint调用的场景。

优化后的兼容代码 #

无需依赖try-catch做降级处理，直接使用兼容性更可靠的SVGPoint方案，同时补充坐标转换逻辑（解决SVG缩放/平移后的坐标匹配问题）：

function getIdOfElementAtPoint(event) {
    const paths = svg.getElementsByTagName("path");
    // 仅创建一次SVGPoint对象，减少重复实例化开销
    const point = svg.createSVGPoint();

    for (let i = 0; i < paths.length; i++) {
        const path = paths[i];
        // 更新点击的屏幕坐标
        point.x = event.clientX;
        point.y = event.clientY;
        
        // 关键：将屏幕坐标转换为SVG自身的局部坐标系（适配SVG缩放、平移等变换）
        const svgTransformMatrix = svg.getScreenCTM().inverse();
        const transformedPoint = point.matrixTransform(svgTransformMatrix);
        
        const inFill = path.isPointInFill(transformedPoint);
        
        if (inFill) {
            console.log(`点击命中元素ID: ${path.getAttribute("id")}`);
            return path.getAttribute("id"); 
        } 
    }
    console.log("未命中任何SVG路径元素");
}

重要说明 #

1. 坐标转换必要性：如果SVG存在缩放、平移或其他变换，直接使用clientX/clientY会导致坐标不匹配，必须通过getScreenCTM().inverse()完成屏幕坐标到SVG局部坐标系的转换。
2. 性能优化：SVGPoint对象只需初始化一次，避免在循环内重复创建，降低内存消耗。
3. 兼容性覆盖：该方案可适配所有主流浏览器（Firefox、Chromium、Safari等），无需依赖try-catch的降级逻辑。

内容的提问来源于stack exchange，提问作者James Homer