Safari中堆叠SVG内的foreignObject/object标签点击事件不触发问题

Safari 对嵌套在 SVG <foreignObject> 标签内的 <object> 加载的子 SVG 文档存在交互事件处理的兼容缺陷，子 SVG 内部绑定的 DOM 事件默认不会被触发，该问题仅在 Safari 内核浏览器中存在。

• 最简修复方案：给 <foreignObject> 内的 <object> 标签添加 pointer-events: all 样式，同时给 second.svg 根节点添加 pointer-events="all" 属性，强制 Safari 识别子 SVG 的交互区域，绝大多数场景下可直接修复事件不触发的问题。
  修改代码示例如下：
  main.svg 中 object 部分修改：

<xhtml:object
   width="100%"
   type="image/svg+xml"
   data="/second.svg"
   style="pointer-events: all" />

second.svg 根 svg 标签修改：

<svg width="1920" height="1080" viewBox="0 0 508 285.75" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
pointer-events="all">

• 备选方案1：放弃 <foreignObject> 嵌套加载的方案，直接将 second.svg 作为分组内联到 main.svg 中，用不同的 id 区分模块，构建阶段可以做代码拆分合并，该方案兼容性最优，无浏览器兼容问题。
• 备选方案2：在 main.svg 中监听 <object> 标签的加载事件，加载完成后通过 object.contentDocument 拿到子 SVG 的文档对象，直接在 main.svg 中给子 SVG 内的元素绑定事件，也可以规避 Safari 的事件监听缺陷。

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