Safari (OS X) doesn't emit pointer events on overflowing SVG contents

问题

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.

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 only emits click if it's inside the <SVG> contents block: https://jsfiddle.net/monfera/n1qgd5h4/5/

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.

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.

回答1:

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

In case you need a quick fix:

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.

来源：https://stackoverflow.com/questions/40587203/safari-os-x-doesnt-emit-pointer-events-on-overflowing-svg-contents

标签

css

svg

safari

overflow

pointer-events