Question

当应用于SVG元素时，我无法使指针事件CSS正常工作。使用iPad时，它的行为不符合预期。

我在这里创建了一个小问题的演示：

http://jsfiddle.net/nPFu2/

如果有人之前遇到此问题或对此有任何见解，我非常感谢您的帮助！

Answer 1

Safari似乎仍然存在svg指针事件的问题。

他们在Webkit和Chrome中运行良好，所以我猜这只是一个尚未修复的Safari漏洞。

......经过一些研究，我发现了混乱。 Safari目前支持svg元素上的指针事件，但这不包括svg标记本身。

Answer 2

我有同样的问题，我就这样解决了。

将svg放在<a>标记
定义＆＃34;：＆＃34; <a>

＆＃13;

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

＆＃13;

<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>

＆＃13;

它应该有用。

Updated fiddle:

Safari Mobile：指针事件CSS不适用于SVG内容

2 个答案: