title: How can I trigger events for overflow elements in Svg. (Safari ios)
body: <p>It seems that Safari on ios do not trigger events for overflow elements in Svg.
  I do need svg element to be clickable even if they overflow.
  Please check the link below. The rectangle in right side should be clickable as well. Working as expected in all mobile browsers except safari. Is there any workaround to solve this problem? I can not change the width, height and viewBox of svg element because the content of svg will be created dynamically.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div style="overflow:visible;width:100%;height:100vh;"&gt;
    &lt;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"&gt;
        &lt;g id= "xxx"&gt;
          &lt;rect id="rec" x="200" y="0" style="overflow:visible;fill:#d4120c;" width="3600" height="1000"/&gt;
      &lt;rect  x="2000" y="0" style="overflow:visible;fill:#ffffff;" width="10" height="1000"/&gt;
        &lt;/g&gt;      
     &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javasript:</p>
  
  <pre><code>var i = true;
  $(document).ready(function() {
    $("#xxx").click(function() {
      if (i) {
        $("#rec").css("fill", "#000000");
        i = false;
      } else {
        $("#rec").css("fill", "#d4120c");
        i = true;
      }
    });
  });
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/aKddQJ" rel="nofollow noreferrer">https://codepen.io/anon/pen/aKddQJ</a></p>