如何在Svg中触发溢出元素的事件。 （Safari ios）

Question

似乎ios上的Safari不会在Svg中触发溢出元素的事件。 我确实需要svg元素，即使它们溢出也是可点击的。 请检查以下链接。右侧的矩形也应该是可点击的。在safari之外的所有移动浏览器中按预期工作。有没有解决此问题的解决方法？我无法更改svg元素的宽度，高度和viewBox，因为svg的内容将动态创建。

HTML：

<div style="overflow:visible;width:100%;height:100vh;">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 2000 1000" style="overflow:visible;" preserveAspectRatio="none" xml:space="preserve">
      <g id= "xxx">
        <rect id="rec" x="200" y="0" style="overflow:visible;fill:#d4120c;" width="3600" height="1000"/>
    <rect  x="2000" y="0" style="overflow:visible;fill:#ffffff;" width="10" height="1000"/>
      </g>      
   </svg>
</div>

Javasript：

var i = true;
$(document).ready(function() {
  $("#xxx").click(function() {
    if (i) {
      $("#rec").css("fill", "#000000");
      i = false;
    } else {
      $("#rec").css("fill", "#d4120c");
      i = true;
    }
  });
});

https://codepen.io/anon/pen/aKddQJ