使用 snap.svg IE 和 EDGE 网络浏览器快速悬停时使用动画缩放 in/out

Question

我不明白，为什么 IE 和 EDGE 有奇怪的行为。如果您快速将鼠标移出五角星形——动画是有距离的，但在其他正常的网络浏览器中一切正常。 http://jsfiddle.net/b1Lhjo4k/

var svgElement = Snap("#svg");
var pent = svgElement.select('#pentagram-one');
var hoverover = function() {
    pent.stop().animate({transform: 'r180,500,515'}, 400);
};
var hoverout  = function() {
    pent.stop().animate({transform: 'r0,500,515'}, 400);
};
pent.hover(hoverover, hoverout);

通过原型函数解决； ie 和 edge 现在可以正常工作了。

Answer 1

我没有要测试的 Edge，但我怀疑它是因为它在上一个动画完成之前开始动画时使用 Matrix/transform 插值做了一些时髦的事情（这可能是错误的，但最初的想法是看一下），或者它可能是一些奇怪的东西，因为我以前在 IE 中看到过那些非常小的数字字符串。

解决这个问题的一种方法是不让 Snap 使用浏览器矩阵值进行插值，而是自己控制它。你可以尝试一个小插件，如果你会经常使用它，像这样...

Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.animRotate = function( from, to, dur ) {
       var el = this;
       this.stop();
       Snap.animate(from, to, function( val ) {
           el.transform('r' + val + ',500,515')
       },dur)
       return this;
    };
});

var pent = svgElement.select('#pentagram-one');

var hoverover = function() {
    this.animRotate(0, 180, 400)    
};
var hoverout  = function() {
    this.animRotate(180, 0, 400)
};

jsfiddle

使用 snap.svg IE 和 EDGE 网络浏览器快速悬停时使用动画缩放 in/out

Zooming in/out with animate on QUICKLY hover with snap.svg IE and EDGE web-browser

javascript

svg

svg-animate

snap.svg