使用snap.svg在悬停时放大/缩小animate

Zooming in/out with animate on hover with snap.svg

本文关键字：放大 缩小 animate 悬停 snap svg 使用      更新时间：2023-09-26

由于缺乏IE对动画的支持，我正在构建一个SVG并在snap.SVG中为其设置动画（感谢IE）。它最基本的形式是一个五边形，我想在悬停时旋转，在鼠标悬停时，它会重置自己。代码位于下面的fiddle中（显然这是真实事物的精简版本，但它仍然清楚地显示了错误）

JS如下：

// Set up snap on the svg element
var svgElement = Snap("#svg");
// Create the hover on and off events
var hoverover = function() {
    svgElement.select('#pentagram-one').stop().animate({transform: 's1r72,500,515'}, 1000);
};
var hoverout  = function() {
    svgElement.select('#pentagram-one').stop().transform('s1R0,500,515');
};
// Set up the functions for hover in and out
svgElement.select('#pentagram-one').hover(hoverover, hoverout);

这种行为的Fiddle演示如下：http://jsfiddle.net/kfs8o9mw/

五边形在第一次悬停时按预期旋转，然后悬停。然而，当第二次这样做时，五边形会放大和缩小一点，这是完全出乎意料的（它最终达到了正确的大小，但在动画中不是）。我已经能够在IE（10）、Chrome和Firefox中复制这一点。

这是snap.svg中的错误还是代码中有问题？

提前感谢

您只需删除为天平定义的s1，如下所示：

还要注意，在hoverout的转换事件中使用了大写R，而它应该是小写r

http://jsfiddle.net/3phpbef7/2/

我还将五角星元素定义为一个变量，因为你多次使用它。我在上面的Fiddle中也包含了这个。

希望这能帮助

相关文章：