Estoy tratando de agregar eventos de clic a un elemento SVG que tiene un desbordamiento visible y un elemento de forma (círculo / ruta) dentro que desborda el SVG.

En Safari (9,10,11), el evento click no funciona en el área donde el elemento de forma (círculo / ruta) se desborda mientras funciona bien en el área presente dentro del SVG.

var count = 0;

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

#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;
}

<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" shape-rendering="geometricPrecision" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
          </g>
        </svg>
  </div>
</div>

¿Esto también es un error en Safari? El evento click funciona bien en todos los navegadores, incluido IE.