title: SVG element not clickable on Safari
body: <p>This is the code below to reproduce</p>
  
  <pre><code>&lt;svg focused="true" width="338.35" height="338.35" version="1.2" viewBox="0 0 1200 1600" style="overflow:visible;"&gt;
  
     &lt;g onclick="alert(2)" transform="translate(0,0) rotate(0,375.7469534186119,500.9959378914826)"&gt;  
      &lt;rect width="600" height="800" fill="red"&gt;&lt;/rect&gt;
    &lt;/g&gt;
  
    &lt;g onclick="alert(1)" transform="translate(1537.23915382511058,0) rotate(0,375.7469534186119,500.9959378914826)"&gt;
  
      &lt;rect width="600" height="800"&gt;&lt;/rect&gt;
    &lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/fb6swzba/" rel="nofollow noreferrer">http://jsfiddle.net/fb6swzba/</a></p>
  
  <p>When a box clicked, it alerts a number. As you see, the red box works in both browsers. On chrome, both red and black box works. But on Safari red box works, but black box is not reactive at all. </p>
  
  <p>When <strong>rect</strong> is out of the width defined in SVG, it's visible on the browser as style <strong>overflow:visible</strong> does that. But it's not clickable on safari browsers however the same example works in Chrome. </p>