5

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

4

1 回答 1

0

2年多后，这仍然没有解决。相当令人失望。

如果您需要快速修复：

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

   path {
      pointer-events: auto;
   }
}

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

于 2019-01-29T10:48:39.403 回答