css - 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> 内才会发出点击内容 block :https://jsfiddle.net/monfera/n1qgd5h4/5/

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

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

Answer 1

2 年过去了，这仍然没有解决。非常令人失望。

如果您需要快速修复:

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

   path {
      pointer-events: auto;
   }
}

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