带有指针事件的 Svg 在 Safari 中不起作用答案

【问题标题】：Svg with pointer events not working in safari带有指针事件的 Svg 在 Safari 中不起作用
【发布时间】：2013-05-09 06:28:12
【问题描述】：

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

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

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

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

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

【问题讨论】：

您使用的是哪个版本的 Safari？这个链接说它应该在最新版本中支持http://caniuse.com/pointer-events
@MarmiK 我在 Windows 机器中使用 Safari 5.1.7。
尝试空白而不是自动，因为它可能是 safari 的错误，它不适用于 iPad 的过于特殊的 SVG 元素。可能是路径元素

标签： css svg

【解决方案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 时，它会停留在鼠标和其他怪物之间。

告诉我

【讨论】：

代码在页面向下滚动，你看到了吗？
是的，我已经看到了代码，但是您知道要调试该代码也很困难，因为它的停留时间最短。你能用我在问题中包含的小提琴分享/实现该代码吗？

【解决方案2】：

我已经用 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”>

让我知道结果。

【讨论】：

它不适用于您更改的 jsfiddle，它也不适用于 DocType 声明中的更改。它在你的情况下有效吗？还是我错过了什么？