Chrome中SVGGeometryElement.isPointInFill()兼容性问题求助

问题背景 #

需要每秒检测数千条SVG路径，判断指定点是否位于路径的填充区域内。使用path.isPointInFill(point)方法时，Firefox下未将路径添加到文档就能正常返回结果，但Chrome中仅当路径被添加到文档时才会返回正确值，而频繁添加/移除元素会导致性能下降约100倍。目前改用射线法实现，但速度仍比理想情况慢10倍，急需更高效的解决方案。

复现代码 #

const sPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
sPath.setAttribute('d', "M0 0 L10 0 L10 10 L0 10 Z");
const sPoint = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGPoint();
sPoint.x = 5;
sPoint.y = 5;

console.log("virtual:" + sPath.isPointInFill(sPoint));
// Chrome: false, Firefox: true

// 添加到文档后两者均返回true
const svg = document.documentElement.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"))
svg.appendChild(sPath);
console.log("appended:" + sPath.isPointInFill(sPoint));
svg.removeChild(sPath);

优化方案 #

1. 复用离屏SVG容器 #

Chrome要求路径元素处于文档树中才能正确计算isPointInFill，但我们可以创建一个隐藏的离屏SVG容器，复用它来承载待检测的路径，避免频繁创建和销毁SVG元素：

// 初始化时创建一次隐藏容器，全局复用
const offscreenSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
offscreenSvg.style.position = 'absolute';
offscreenSvg.style.left = '-9999px';
offscreenSvg.style.top = '-9999px';
document.body.appendChild(offscreenSvg);

// 检测函数
function checkPointInPath(pathData, point) {
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', pathData);
  offscreenSvg.appendChild(path);
  const result = path.isPointInFill(point);
  offscreenSvg.removeChild(path);
  return result;
}

这种方式避免了每次检测都创建新的SVG根元素，性能损耗远低于临时添加到文档的方式，同时保留了原生API的高效性。

2. 优化射线法实现 #

如果继续使用射线法，可从以下几点优化性能：

• 预解析路径：提前将所有路径的d字符串解析为坐标指令数组，避免每次检测时重复解析字符串
• 缓存计算结果：对于重复检测的路径和点，缓存结果直接复用
• 简化运算逻辑：使用整数运算（将坐标放大为整数）减少浮点计算的性能开销，同时降低精度误差

3. 并行处理（Web Worker） #

将路径检测逻辑放到Web Worker中执行，可利用多核CPU并行处理多条路径的检测任务，避免阻塞主线程的同时提升整体吞吐量。适合大规模路径检测的场景。

内容的提问来源于stack exchange，提问作者JürgenB