Safari SVG Overflow

by Sriram R

HTML

<html>
  <body>
    <div>
      <p>Open this webpage on Chrome &amp; safari</p>
      <p>On Chrome: Click work on all four hands of the star.</p>
      <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>

      <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
        <span id="counter">0</span>
      </p>
      <div class="containter">
        <svg onclick="clickMe()" id="starSvg" width="100%" height="100%">
          <g width="100%" height="100%" transform="" style="overflow: visible; transform: rotate(45deg) translate(0, 0);">
            <polygon id="starPolygon"="geometricPrecision" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
          </g>
        </svg>
      </div>
    </div>
    <script type="text/javascript">
      var count = 0;

      function clickMe() {
        console.log("in click func");
        count++;
        document.getElementById("counter").innerHTML = count;
      }

    </script>
  </body>

</html>

CSS

#counter {
   font-size: 2em;
 }
 
 #starSvg {
   pointer-events: auto;
   overflow: visible;
   position: absolute;
   left: 200px;
   top: 250px;
   border: 1px solid red;
 }
 
 #starPolygon {
   overflow: visible;
   fill: rgba(0, 153, 219, 1);
   pointer-events: visiblePainted;
   stroke-width: 4;
   stroke-linecap: square;
   stroke-linejoin: round;
   stroke: rgba(219, 0, 153, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision
 }
 
 p {margin: 10px 0;}