Javascript 溢出SVG不会在OSX/iOS上注册单击

我的应用程序中有一个小的SVG画布，里面有一个按钮可以单击。单击该按钮后，小圆圈会进行一些浮华的工作，并打开一个合适大小的气泡以容纳所有数据。此数据只是一个数据列表，左侧有自定义项目符号；其中一些文本是可单击的（绑定到单击事件），并导致其他函数被触发。我的问题是SVG画布的大小永远不会改变。它实际上只够容纳用户单击的原始圆圈。构成此控件的其余SVG元素在SVG画布的边界之外流动，但由于SVG将其溢出设置为可见，因此所有元素都是可见的。所有浏览器都可以正常工作，但当我在iPad或Mac上打开应用程序时，情况会发生变化（无论浏览器如何）。看起来SVG的溢出部分对浏览器是完全不可见的。在Windows浏览器上溢出的SVG元素上触发的任何单击事件在OSX/iOS浏览器上都是完全不可见的（看起来任何单击实际上都会穿透溢出的SVG后面的内容）。起初我认为这是单击绑定的问题，但在搜索和使用它之后，我认为OSX/iOS不能很好地处理溢出的SVG

为了以最简单的形式解释我的应用程序中发生了什么，我这里有一个非常简单的JSFIDLE：

HTML:

Circle1在SVG画布的范围内，而circle2不在SVG画布的范围内。在Windows浏览器上，您可以单击两个圆圈，而不会出现任何问题。在OSX/iOS浏览器上，单击事件将针对circle1而不是circle2触发。

---

有人知道如何实现这一点吗？

是的，这更多的是浏览器引擎问题，而不是操作系统问题：它会影响Safari和使用Webkit的旧Chrome版本。但仍然没有解决方案。感谢回复和链接；我到处找，找不到任何东西。我的印象是，这是操作系统，因为即使是最新版本的Chrome也有这个问题，但Chrome for OSX似乎运行良好。事实上，你联系的问题是2.5年前提出的，我不相信它会很快得到解决。羞耻。是的，这更多的是浏览器引擎问题，而不是操作系统问题：它影响了Safari和使用Webkit的旧Chrome版本。但仍然没有解决方案。感谢回复和链接；我到处找，找不到任何东西。我的印象是，这是操作系统，因为即使是最新版本的Chrome也有这个问题，但Chrome for OSX似乎运行良好。事实上，你联系的问题是2.5年前提出的，我不相信它会很快得到解决。羞耻。

  <svg style="overflow: visible !important" class="canvas" width='70px' height='70px' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <circle id="circle1" stroke="black" fill="black" stroke-width="1" cx="10" cy="10" r="10"></circle>
    <circle id="circle2" stroke="black" fill="black" stroke-width="1" cx="110" cy="110" r="10"></circle>
  </svg>

  $('#circle1').click(function() {
    alert('yeah');
  })
  $('#circle2').click(function() {
    alert('yeah2');
  })