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

Question

我需要捕获指针事件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中手动重做浏览器应该做什么.

Answer 1

两年多过去了，这个问题仍然没有解决。相当令人失望。

如果您需要快速修复：

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

   path {
      pointer-events: auto;
   }
}

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