Safari (OS X) 不会在溢出的 SVG 内容上发出指针事件 [英] Safari (OS X) doesn't emit pointer events on overflowing SVG contents

问题描述

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

I need to capture pointer events click and mousemove on shapes that are outside the contents box defined via <SVG> width/height, rendered via overflow: visible.

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

In this example, the circle is rendered properly, and current Chrome, FireFox and IE11 do capture pointer events on the overflowing part, whether or not there's e.g. padding. However, on Safari 10.0.1 OS X, pointer events are not registered, even when I use padding, border, and/or margin, no matter which ones of the possible 8 permutations.

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

Safari only emits click if it's inside the <SVG> contents block: https://jsfiddle.net/monfera/n1qgd5h4/5/

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

Is there a way of listening to pointer events that are in the overflow area? I haven't checked yet if Safari is non-compliant (bug) or the other browsers are lax.

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

I can resort to the workaround of making a larger <SVG> element but it would invalidate much of the benefit of the box model and the CSS overflow, leading to manually redoing in JS what the browser should do.

推荐答案

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

This is still not fixed, over 2 years later. Pretty disappointing.

如果您需要快速修复:

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

   path {
      pointer-events: auto;
   }
}

然后将捕获所有鼠标事件.有点老套，但它适用于所有现代浏览器.

<path> will then capture all mouse events. A little hacky, but it works in all modern browsers.

这篇关于Safari (OS X) 不会在溢出的 SVG 内容上发出指针事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！