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

问题描述

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

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确实捕获了溢出部分的指针事件，无论是否存在. padding.但是，在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>将捕获所有鼠标事件.有点黑，但它可以在所有现代浏览器中使用.

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

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