Safari Mobile: CSS-события указателя не работают для контента SVG

Question

У меня проблемы с настройкой CSS-событий указателя для правильной работы при применении к элементу SVG. Он не работает должным образом при использовании iPad.

Я создал небольшую демонстрацию проблемы здесь:

http://jsfiddle.net/nPFu2/

Если кто-то сталкивался с этим раньше или имеет какое-либо понимание этого, я очень благодарен за помощь!

Answer 1

Safari по-прежнему испытывает эту проблему с событиями указателя svg.

Они отлично работают в Webkit и Chrome, так что, я думаю, это просто ошибка Safari, которую они еще не исправили.

... После еще одного исследования я выяснил путаницу.Safari в настоящее время поддерживает события указателя на элементы svg, но это не включает сам тег svg.

Answer 2

У меня была такая же проблема, и я решил ее следующим образом.

1. Поместите svg в тег <a>
2. Определите элемент ": after" для <a>

 a::after{
  content:'';
  position:absolute;
  width:500px;
  height:100px;
  top:0;
} 
svg {
  background-color:red;
}

<a href="javascript:alert('click');">Click me
<svg id="svgpath" style="overflow-x: hidden; overflow-y: hidden; position: absolute; left: 0px; top: 0px; cursor: crosshair !important; pointer-events: none; " height="100" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg"><path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; " fill="none" stroke="#ffff00" d="M9 12L85 11" stroke-width="15" opacity="0.3"></path></svg>
</a>

Должно работать.

Обновленная скрипта: