Javascript 使用snap.svg悬停时的动画放大/缩小

我正在构建一个SVG并在snap.SVG中设置动画，因为缺少IE对动画的支持（谢谢IE）。它最基本的形式是一个五角大楼，我想在悬停状态下旋转，鼠标离开后，它会自动复位。代码位于下面的提琴中（显然这是一个真实版本的精简版，但它仍然清晰地显示了错误）

调查结果如下：

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

此行为的小提琴演示：

五角大楼在第一次盘旋时按预期进行旋转，然后向外旋转。然而，当第二次执行此操作时，五角大楼会放大和缩小一点，这完全出乎意料（它最终的大小是正确的，但在动画中不是）。我已经能够在IE（10）、Chrome和Firefox中复制这一点

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

---

提前感谢

您只需删除您为比例定义的

s1

，如下所示：

还请注意，在

悬停

的转换事件中，您使用的是大写的

R

，而它应该是小写的

R

我还将五角星元素定义为一个变量，因为您多次使用它。我也在上面的提琴中加入了这个

希望这有帮助