Question

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

为了实现这一点，我使用了指针事件：没有css属性到根SVG标签，这在包括IE和Mozilla在内的大多数浏览器中都能正常工作。

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

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

有没有人知道这个？或者解决这个问题？

Answer 1

我在SVG中使用rect元素更新了fiddle请检查它是否正常工作。

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

让我知道结果。

Answer 2

我做了一个适用于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时，它停留在鼠标和其他怪物之间。

让我知道

Svg指针事件在safari中不起作用

2 个答案: