Question

我正在构建一个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中的错误还是代码中有错误？

提前致谢

Answer 1

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

另请注意，您在R的转化事件中使用大写hoverout时，它应为小写r

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

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

希望这有帮助

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

1 个答案: