Safari Mobile : 포인터 이벤트 CSS가 SVG 내용에 대해 작동하지 않습니다.

Question

SVG 요소에 적용 할 때 포인터 이벤트 CSS가 올바르게 작동하는 데 문제가 있습니다. iPad를 사용할 때 예상대로 작동하지 않습니다.

나는 여기에 문제의 작은 데모를 만들었습니다

사람이 전에이로 실행하거나이에 어떤 통찰력을 가지고있는 경우 http://jsfiddle.net/nPFu2/

, 내가 도움을 매우 감사 해요!

Answer 1

Safari는 여전히 svg 포인터 이벤트에이 문제가있는 것으로 보입니다.

그들은 Webkit과 Chrome에서 잘 작동하므로, 아직 수정하지 않은 사파리 버그 일뿐입니다.

... 좀 더 조사한 후에 혼란을 알아 냈습니다. Safari는 현재 svg 요소에서 포인터 이벤트를 지원하지만 svg 태그 자체는 포함하지 않습니다.

Answer 2

나는 같은 문제가있어서 이것을 이렇게 풀었다. <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>

그것은 작동해야 요소 "이후의"<a> 태그

내부 SVG 정의

1. 찾는.

   Updated fiddle: