通过object标签分层SVG时鼠标事件异常的技术问询

这个问题我之前也碰到过，确实挺坑的——<object>作为独立的浏览上下文，它的pointer-events行为和内部SVG的属性并不是完全联动的，哪怕你把内部SVG的元素都设成pointer-events: none，<object>本身还是会以自身的矩形边界来拦截鼠标事件，这和SVG的默认行为不一样，因为<object>本质是个容器元素，不是SVG的一部分。

下面给你几个可行的解决方案，按优先级排序：

方案1：改用<svg>直接内嵌（推荐） #

如果你的SVG文件没有跨域限制，完全可以把上层SVG的内容直接内嵌到页面里，用<svg>标签代替<object>。这样整个SVG的元素都在当前文档的DOM树里，pointer-events属性就能正常工作了：

<!-- 代替<object data="top-layer.svg"> -->
<svg viewBox="0 0 100 100">
  <!-- 这里直接放top-layer.svg的内容 -->
  <circle cx="50" cy="50" r="20" fill="red" pointer-events="auto" />
  <!-- 透明区域会自动穿透事件 -->
</svg>

这样透明区域的鼠标事件会自动穿透到下层元素，完全符合SVG的默认行为，也不用折腾<object>的各种奇怪属性。

方案2：给<object>设置pointer-events: bounding-box（部分浏览器支持） #

如果必须用<object>，可以试试给<object>元素设置pointer-events: bounding-box，这个值会让元素只在自身边界内但内容不透明的区域响应鼠标事件，而不是整个矩形都拦截：

object.top-layer {
  pointer-events: bounding-box;
}

不过要注意，这个属性的支持度不算100%，比如旧版Chrome和Firefox可能有兼容问题，你可以先测试一下你的目标浏览器是否支持。

方案3：用JavaScript模拟事件穿透（兜底方案） #

如果上面两个方案都不行，那只能用JS来手动处理事件穿透了：

1. 监听上层<object>的鼠标事件（比如mousemove、click）
2. 获取事件的坐标，然后通过document.elementFromPoint()找到下层的元素
3. 手动触发下层元素对应的事件

示例代码：

const topObject = document.querySelector('object.top-layer');

topObject.addEventListener('click', (e) => {
  // 先禁用当前object的事件捕获，避免循环触发
  topObject.style.pointerEvents = 'none';
  // 获取相对于文档的坐标
  const x = e.clientX + window.scrollX;
  const y = e.clientY + window.scrollY;
  // 找到下层的目标元素
  const targetElement = document.elementFromPoint(x, y);
  // 如果找到下层元素，手动触发click事件
  if (targetElement && targetElement !== topObject) {
    targetElement.dispatchEvent(new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      clientX: e.clientX,
      clientY: e.clientY
    }));
  }
  // 恢复object的事件捕获
  topObject.style.pointerEvents = 'auto';
});

这个方案比较繁琐，但兼容性最好，适合必须用<object>且浏览器不支持bounding-box的场景。

为什么设置内部SVG的pointer-events没用？ #

因为<object>的内容是在独立的文档里（可以通过contentDocument访问），这个文档的事件上下文和主页面是分离的。哪怕你把内部SVG的所有元素都设成pointer-events: none，<object>本身作为主页面的元素，还是会以自己的矩形区域来拦截鼠标事件，这是浏览器对替换元素的默认处理逻辑，和SVG的pointer-events规则是两回事。

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