1

Fairly new to SVG animations and Javascript. I generated an svg file from Illustrator, optimized it with Kraken.io, and am attempting an animation in codepen with Velocity.js.

I have an an object (paths) and another object (paths) hidden behind which fades in on mouseenter. The hidden object is grouped by a g container, is defined by defs, and then used in a clipping mask. The problem is that if the mousemoves in the object, the animation flickers.

Codepen: http://codepen.io/malloryajk/pen/bwxyvB

<g id="Artwork_18" class="cerebellum">
  <defs><path id="SVGID_1_" d="M1097.44 638.07l4.77-53.1 53.5 4.8-4.77 53.1z"/></defs>
  <clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_" overflow="visible"/>
  </clipPath>
  <path d="M1114.7 586l-13 5.2-1.9 21.2z" class="st1 poly"/> <!-- ... more paths... --> </g>

I found this response: d3.js - mouseover event not working properly on svg group

I understand that it is flickering because g is a shapeless container and that I could append a rectangle on mouseenter. My question is, is there a way to use the defs dimensions? I would think that I could either tell the g container to take on the defs dimensions or that I could listen for mouseenter on the defs path, but I can't get either to work.

Any help is appreciated!

Community
  • 1
  • 1
missmal
  • 31
  • 1
  • 2
  • i tried some stuff but could get a solution. But i think you are looking for something that has a delay after mouseleve before triggers mouseenter -> http://stackoverflow.com/a/4831129/4737729 – sandrina-p Oct 18 '16 at 18:29
  • Sorry... still didn't find a solution.. i'll think about it during the sleep, you have a good challenge. Meanwhile I improved your JS code to avoid duplicated code. http://codepen.io/sandrina-p/pen/yaRjPL – sandrina-p Oct 18 '16 at 20:22
  • I played with the delay but that doesn't seem to be fixing it. Thank you for your help!! – missmal Oct 18 '16 at 20:55
  • Yh me too, with flags, mouseout methods and so on so on... This is tricky. Is it possible to change how the svg is constructed? To have a path that covers the "children paths" ? – sandrina-p Oct 18 '16 at 21:06
  • I tried changing it in Illustrator and playing with but I don't know svg well enough to change the construction – missmal Oct 19 '16 at 00:41

0 Answers0