Safari не выделяет события указателя при переполнении содержимого SVG

Я пытаюсь добавить события кликов к элементу SVG, который имеет видимое переполнение и элемент формы (круг/путь) внутри него, который переполняет SVG.

В Safari (9,10,11) событие click не работает в области, где элемент формы (круг/путь) переполняется, пока он отлично работает в области, присутствующей в 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>

ОТВЕТЫ

Ответ 1

Это отражает отчет об ошибке Webkit # 140723 здесь: https://bugs.webkit.org/show_bug.cgi?id=140723

Этот отчет об ошибках ссылается на этот пример кода, воспроизводя точные результаты, которые вы нашли: https://codepen.io/anon/pen/pvPQqY

И с исправлением, как я описал ниже, здесь:

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

===========

Отредактировано для ясности: очевидны очевидные признаки того, что начальное обрезание вступает в силу на границе внешнего внешнего вида (svg), и в то же время свойство переполнения позволяет видеть видимость формы вне этой обрезанной области. В действительности рендеринг событий указателя недействителен.

Говоря иначе, доказательство того, что обрезание применяется в IAW, первое предложение здесь: http://w3.org/TR/SVG11/masking.html#AutoClipAtViewportNotViewBox, в то же время соответствующее переполнению правила (последние три) здесь: http://w3.org/TR/SVG11/masking.html#OverflowAndClipProperties является причиной этой проблемы с Safari;

Чтобы преодолеть эту проблему, OP должен создать окно просмотра оболочки для создания (обходного) решения для дилеммы, созданной непоследовательными реализациями.

Это похоже на добавление любой другой структуры HTML, которая может потребоваться для переноса необходимого содержимого. (Я действительно сосредоточен на том, чтобы помочь решить проблему)

Надеюсь, что это поможет.

var count = 0;
document.querySelector('svg').addEventListener('click',clickMe);

function clickMe(e) {
  console.log("clicked on: " + e.target.id);
  count++;
  document.getElementById("counter").innerHTML = count;
}
#counter {
  font-size: 2em;
}

#starSvg {
  pointer-events: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}

#starPolygon {
  transform: translate(50%, 50%) rotate(45deg);
  fill: rgba(0, 153, 219, 1);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke: rgba(219, 0, 153, 1);
  cursor: pointer;
  shape-rendering: geometricPrecision
}
#starClip {
  width: 100%;
  height: 100%;
  stroke-width: 1;
  stroke: red;
  fill: transparent;
}

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 id="starSvg">
          <rect id="starClip" x="50%" y="50%"></rect>
          <g>
            <polygon id="starPolygon" x="0" y="0" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
          </g>
        </svg>
  </div>
</div>