javascript - 如何使用 Snap.SVG 实现悬停效果？

Question

我正在使用 Snap.svg 在悬停输入/输出时以及单击我使用 Illustrator 创建和导出的 SVG 插图时测试动画。

我有一个包含其他子组的组。将鼠标悬停在父组上时，某些子组会使用捕捉进行动画处理。问题在于，悬停事件在进入父组时触发，但悬停事件在悬停子组时触发，导致动画停止、或重新开始、或返回初始状态。

我的 svg 组的结构如下:

--“renard”组

----“tete”组

----“bras_gauche”组

----“bras_droit”组

----“队列”组

我尝试使用 elm.attr({pointerEvents: "none"}); ( see here ) 但它不起作用。它完全停用了我父组上的悬停触发。

结果在这里:http://codepen.io/Hugo8705/pen/zGVxPL

我使用狐狸上方的透明矩形热点获得了所需的效果，但该热点并不完全适合狐狸的形状:http://codepen.io/Hugo8705/pen/ZGdYOX

我希望它足够清楚，我真的不知道如何解决这个问题。也许是我的标记配置不好。

感谢您的帮助，

雨果

Answer 1

Pointer-events 不是 svg 属性。尝试将其作为所有子元素的 CSS 样式。

所以代替 elem.attr({pointerEvents: "none"});

尝试为每个子组创建一个css样式的pointer-events: none，例如

#tete, #bras_gauche etc { pointer-events: none; }