我正在使用 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
我希望它足够清楚,我真的不知道如何解决这个问题。也许是我的标记配置不好。
感谢您的帮助,
雨果
最佳答案
Pointer-events 不是 svg 属性。尝试将其作为所有子元素的 CSS 样式。
所以代替 elem.attr({pointerEvents: "none"});
尝试为每个子组创建一个css样式的pointer-events: none,例如
#tete, #bras_gauche etc { pointer-events: none; }
关于javascript - 如何使用 Snap.SVG 实现悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32101029/