陷阱raphael.js div内圈的动画

Question

我将两个Raphael.js对象构建为<div id="eyes"></div>

var paper = Raphael('eyes', 200, 200);

        var left_eye = paper.circle(60, 40, 26);
        var right_eye = paper.circle(125, 40, 26);

        left_eye.attr("stroke", "#575757");
        left_eye.attr("stroke-width", 6 );

        right_eye.attr("stroke", "#575757");
        right_eye.attr("stroke-width", 6    );

我有一个动画，其中两个圆圈根据鼠标位置设置动画：

jQuery('body').mousemove(function(evt) {

    var window_width = jQuery(window).width();
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;

    //raphael object 1 and 2        
    left_eye.animate({cx:mouse_x/10},5); 
    right_eye.animateWith(left_eye, null, {cx:mouse_x/10+80}, 5);

    }
}); 

问题是，因为两个对象所在的div具有固定的宽度和高度。当我将鼠标向左或向右移动时，SVG对象会像overflow: hidden div中的每个元素一样消失。

如何在div中捕获Element？就像拥有边框一样，动画无法跨越。

示例：someone else made a similar fiddle

提前致谢。