0

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

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 中的错误还是代码中有问题？

提前致谢

4

1 回答 1

1

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

另请注意，当它应该是小写时，您R在转换事件中使用大写字母hoveroutr

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

当您多次使用它时，我还将您的五角星元素定义为变量。我也在上面的小提琴中包含了这个。

希望这可以帮助

于 2014-09-24T15:37:51.590 回答