Safari Mobile：ポインタイベントCSSがSVGコンテンツに対して機能しない

Question

SVG要素に適用したときにポインタイベントCSSが正常に動作するようになっています。 iPadを使用しているときに期待通りに動作しません。

私はここでの問題の小さなデモを作成しました：

http://jsfiddle.net/nPFu2/

誰もが前に、このに実行するか、これに任意の洞察力を持っている場合は、私が助けを超感謝です！

Answer 1

Safariにはまだsvgポインタイベントでこの問題があるようです。

WebkitとChromeでうまく動作するので、まだ修正されていないSafariのバグだと思います。

...もう少し調査した後、私は混乱を理解しました。 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: