Safari (OS X) 不会在溢出的 SVG 内容上发出指针事件答案

【问题标题】：Safari (OS X) doesn't emit pointer events on overflowing SVG contentsSafari (OS X) 不会在溢出的 SVG 内容上发出指针事件
【发布时间】：2017-03-27 23:59:03
【问题描述】：

我需要捕获指针事件 click 和 mousemove 在由 <SVG> 宽度/高度定义的内容框之外的形状上，通过 overflow: visible 呈现。

在这个例子中，circle 被正确渲染，当前的 Chrome、FireFox 和 IE11 会在溢出部分捕获指针事件，无论是否存在例如padding。但是，在 Safari 10.0.1 OS X 上，即使我使用 padding、border 和/或 margin，也不会注册指针事件，无论可能的 8 个排列中的哪一个。

Safari 只有在 <SVG> 内容块内才会发出点击：https://jsfiddle.net/monfera/n1qgd5h4/5/

有没有办法监听溢出区域中的指针事件？我还没有检查 Safari 是否不兼容（错误）或其他浏览器是否松懈。

我可以求助于制作更大的<SVG> 元素的解决方法，但它会使盒子模型和 CSS overflow 的大部分优点失效，导致在 JS 中手动重做浏览器应该做的事情。

【问题讨论】：

Safari 不兼容。
谢谢@RobertLongson，我向 Apple 提交了错误报告 29307386
您可能会发现以下 polyfill 很有用。 github.com/jquery/pep
@RobertMonfera 您能否提供您提交的此错误报告的直接链接？正在讨论这个问题here，看看 webkit 的回复可能会很有趣。（我在 webkit 的 bugzilla 中找不到）
@Kaiido 我不确定这些事情是否公开；登录后 url 为 bugreport.apple.com/web/?problemID=29307386。这是主要部分，没有更多信息：复制步骤：请关注 stackoverflow.com/questions/40587203/… 和链接的 jsfiddle：jsfiddle.net/monfera/n1qgd5h4/5 预期结果：预计 Safari 会在溢出时注册鼠标事件 @987654339 @（或all）；在此示例中，填充、边框或边距。实际结果：Safari 没有注册指针事件。

标签： css svg safari overflow pointer-events

【解决方案1】：

2 年多过去了，这个问题仍未解决。非常令人失望。

如果您需要快速修复：

svg {
   width: 1000px;
   height: 1000px;
   pointer-events: none;
   // don't use overflow here

   path {
      pointer-events: auto;
   }
}

<path> 然后将捕获所有鼠标事件。有点 hacky，但它适用于所有现代浏览器。

【讨论】：