css - 带有指针事件的 Svg 在 Safari 中不起作用

Question

我一直在使用 SVG 元素（形状），并且在某些情况下，我必须允许鼠标点击通过那些透明的元素或说没有实际形状的元素。

为了实现这一点，我使用了 pointer-events:none 根 SVG 标记的 css 属性，这在包括 IE 和 Mozilla 在内的大多数浏览器中都可以正常工作。

但是 Safari 似乎对这个 css 属性没有影响。这是要检查的小提琴：

'http://jsfiddle.net/AkashSaikia/52aWw/2/'

有没有人对此有想法？或者解决这个问题？

Answer 1

我制作了一个适用于 iPad 上所有浏览器和 safari 的示例

看到这个页面

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=green_monster_game_EN

在 javascript 代码的第 121 行有：

cloned_explosion_sprite.style.pointerEvents = 'none';

这条线为爆炸精灵取消鼠标/触摸事件，当添加到 dom 时，它会停留在鼠标和其他怪物之间。

让我知道

Answer 2

我已经更新fiddle了 SVG 中的 rect 元素请检查它是否正常工作。

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; " fill="none" stroke="#ffff00" height="20" width="80"  stroke-width="10" x=2 y=2 opacity="0.3"></rect>

问题出在带有 SVG 元素的 Safari 上，尽管它说它支持但不支持 100% 的扩展/标签。

如果可行，您还可以更改 DocType，

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;

让我知道结果。