1

I'm testing animations with Snap.svg on hover in/out and on click with an SVG illustration I created and exported with Illustrator.

I have a group that includes others sub-groups. On hovering the parent group, some child groups are animated with Snap. The problem is that the hover event triggers on entering the parent group, but the hover out triggers when hovering the children groups, resulting the animation to stop, or start again, or going back to initial state.

The structure of my svg groups is the following :

--the 'renard' group

----the 'tete' groupe

----the 'bras_gauche' group

----the 'bras_droit' group

----the 'queue' group

I tried using the elm.attr({pointerEvents: "none" }); (see here) but it doesn't work. It desactivate totally the hover triggering on my parent group.

The result is here : http://codepen.io/Hugo8705/pen/zGVxPL

I achieved to get the desired effect using a transparent rectangular hotspot above the fox, but the hotspot doesn't exactly fits the fox shape : http://codepen.io/Hugo8705/pen/ZGdYOX

I hope it's clear enough, I really don't know how I could fix that problem. Maybe it's the configuration of my mark up that's not good.

Thank you for your help,

Hugo

Community
  • 1
  • 1
Hugo
  • 11
  • 3

1 Answers1

0

Pointer-events isn't an svg attribute. Try it as css styling on all of the sub elements.

so instead of elem.attr({ pointerEvents: "none" });

try create a css style pointer-events: none for each of the sub groups, eg

#tete, #bras_gauche etc { pointer-events: none; }
Ian
  • 13,724
  • 4
  • 52
  • 75
  • It gives me the same result. If I add a { pointer-events:none; } via CSS to every sub elements, the body itself doesn't trigger the hover event anymore. I'm wondering if drawing a transparent zone with the exact shape of the parent element would be a good solution, thought it's not the easiest way. – Hugo Aug 20 '15 at 15:08
  • set the css style when the animation is running, and turn off when its not ? – Ian Aug 20 '15 at 20:43
  • I tried to add the pointer-event:none; only on hovering in but it doesn't solve the problem. actually if i disable the hover on sub-elements with pointer-event:none; the parent element doesn't trigger hover event anymore. – Hugo Aug 20 '15 at 21:54
  • You don't want it to trigger until the animation is over (I assume) – Ian Aug 21 '15 at 15:55
  • I finally got things to work but I didn't need to trigger animation start. I just exported again my SVG with Illustrator adding id to all differents elements. Really strange but seems to be the problem. Didn't change my JS code. Thank you for your help – Hugo Aug 25 '15 at 22:21