如何使用Snap.SVG定位悬停效果?

时间:2015-08-19 16:32:19

标签: javascript jquery animation svg snap.svg

我在悬停进/出时使用Snap.svg测试动画,然后点击我创建的SVG插图并使用Illustrator导出。

我有一个包含其他子组的组。在悬停父组时,一些子组使用Snap进行动画处理。问题是悬停事件在进入父组时触发,但悬停儿童组时会触发悬停,导致动画停止,或重新开始,或返回初始状态。

我的svg组的结构如下:

- ' renard'组

----' tete' GROUPE

----' bras_gauche'组

----' bras_droit'组

----'队列'组

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

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

我使用狐狸上方的透明矩形热点实现了预期效果,但热点并不完全适合狐狸形状:http://codepen.io/Hugo8705/pen/ZGdYOX

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

感谢您的帮助,

雨果

1 个答案:

答案 0 :(得分:0)

指针事件不是svg属性。尝试将其作为所有子元素的CSS样式。

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

尝试为每个子组创建一个css样式指针 - events:none,例如

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