IE11和IE10上带有svg的剪辑图像上的mouseover和mouseout交互问题

Question

这是我的任务：

1. 我有一个剪裁图像的多边形;
2. 在鼠标悬停时，我使用animate方法更改多边形的绘图;
3. 在mouseout上，我使用animate方法设置了初始绘图。

除了IE10和IE11之外，所有浏览器（IE9）也能正常工作。 问题是，鼠标悬停后，“剪切对象”似乎失去了焦点，并且直接触发了IE10和IE11的鼠标输出。

如果符合以下条件，它的工作正常：

1. 我剪辑任何其他元素（文字，多边形，线条）;
2. 我删除了所有动画方法;
3. 我为多边形（图像）的内容设置动画，而不是多边形的绘图。

我尝试使用两个库：snap.svg.js和svg.js. 并且出现了完全相同的问题。

这是一个带Snap的示例代码。

var paper = Snap(currentWidth, currentHeight).appendTo(myDocument));

 var img = paper.image($model.path+'assets/images/ui/right_layer.png');

 var circle = paper.circle(300, 300, 100).attr({
    fill: '#fff'
 });;

 var clipped = img.attr({
    clipPath: circle
 });   

 img.mouseover(function(){
      circle.animate({r: 50}, 1000);
 })

 img.mouseout(function(){
     circle.animate({r: 100}, 1000);
 })