Snap.svg - Restarting a stop event is hung on a sub-element of a pending element

Question

For the project, I use SVG forms, which consist of a background polygon and some text (which I converted in the path) over my poly background. I use Snap.svg to animate my shapes. When I hang over my poly, the shape should scale to a certain size, including everything inside it. When you mouse out, the shape is scaled to its original size.

Here you can find a simplified example: http://jsfiddle.net/XwwwU/11/

I implemented it like this:

SVG / HTML

<svg>
   <g class="el">
     <polygon fill="#C7B299" points="114.558,206 82.115,149.5 114.558,93 179.442,93 211.885,149.5 179.442,206 "/>
     <path fill="#FCFFD4" d="<!-- Lots of points -->"/>
</g>
</svg>

Javascript

var s = Snap.select('svg');
var el = s.select('.el');

el.hover(function(){
  el.animate({transform:"t0,0 s1.35"}, 500);
}, function() {
    el.animate({ transform:"t0,0 s1" }, 500);   
});

, , , , . , Shape , , , , . , , .

,

var s = Snap.select('svg');
var el = s.select('.el');
var poly = el.select('polygon')

poly.hover(function(){
    console.log('hover');
  el.animate({transform:"t0,0 s1.35"}, 500, mina.easeinout);
}, function() {
    console.log('unhover');
    el.animate({ transform:"t0,0 s1" }, 500, mina.easeinout);   
});

. hover, , , , .

, , - , , , " " .

?

. !

Answer 1

pointer-events = "none" , .

, .