使用snap.svg IE和EDGE网络浏览器快速悬停，放大/缩小动画

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

本文关键字：悬停 放大 动画 缩小 浏览器 svg snap IE 网络 EDGE 使用      更新时间：2023-09-26

我无法理解为什么IE和EDGE有奇怪的行为。如果你快速地将鼠标移动到五角星上下——动画是有距离的，但在其他NORMAL网络浏览器中一切都是有序的。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现在工作正常。

我没有Edge要测试，但我怀疑它是因为在上一个动画完成之前开始动画时，它在矩阵/变换插值方面做了一些奇怪的事情（这可能是错误的，但只是最初的想法），或者它可能是一些非常小的字符串，就像我以前在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

相关文章：