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

【问题标题】：Safari Mobile: pointer-events CSS does not work for SVG contentSafari Mobile：指针事件 CSS 不适用于 SVG 内容
【发布时间】：2012-03-20 07:40:50
【问题描述】：

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

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

http://jsfiddle.net/nPFu2/

如果有人以前遇到过这种情况或对此有任何见解，我非常感谢您的帮助！

【问题讨论】：

标签： css ipad safari svg

【解决方案1】：

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

将 svg 放在 <a> 标记内
为<a> 定义一个“:after”元素

 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>

它应该可以工作。

Updated fiddle:

【讨论】：

【解决方案2】：

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

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

...经过更多研究，我弄清楚了其中的困惑。 Safari 目前确实支持 svg 元素上的指针事件，但这不包括 svg 标签本身。

【讨论】：