使用 snap.svg 悬停时放大/缩小动画答案

【问题标题】：Zooming in/out with animate on hover with snap.svg使用 snap.svg 悬停时放大/缩小动画
【发布时间】：2014-11-19 02:46:09
【问题描述】：

我正在构建一个 SVG 并在 snap.svg 中对其进行动画处理，因为 IE 缺乏对动画的支持（感谢 IE）。我最基本的形式是一个五边形，我想在悬停时旋转，在鼠标移出时它会自行重置。代码位于下面的小提琴中（显然这是真实事物的缩减版，但仍然清楚地显示了错误）

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);

在此处演示此行为：http://jsfiddle.net/kfs8o9mw/

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

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

提前致谢

【问题讨论】：

标签： javascript svg snap.svg svg-animate

【解决方案1】：

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

另请注意，您在 hoverout 的转换事件中使用大写 R，而它应该是小写 r

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

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

希望对你有帮助

【讨论】：