TL; DR:SVG上的动画转换属性。设置不按预期运行,当您将鼠标悬停在svg上时,请参阅https://codepen.io/AlexisBRENON/pen/LyPZRG。我的代码中有一些错误吗?
完整版:
我试图以与“Abstergo”相似的方式为一个简单的SVG徽标制作动画。刺客的信条'刺客'游戏(https://youtu.be/vbLz8JzFGXo)。
SVG已经使用Inkscape绘制,然后导出为优化的SVG'删除大部分Inkscape的命名空间内容。我不想使用SVG.js来绘制我的SVG,只是为了给它制作动画。
正如你在这里看到的那样(https://codepen.io/AlexisBRENON/pen/LyPZRG),第一个翻译动画效果很好,但是我将它分别应用到每个部分。然后,应用于SVG.Set的rotate
变换仅适用于5个部分中的4个,但是当您将鼠标移出SVG时,所有部分都会受到反转动画的影响。在一些非常奇怪的动画中崩溃......
顺便说一下,鼠标悬停' mouseout'即使您只是将鼠标移到SVG上,事件似乎也会被触发,当您不停止移动鼠标时会导致奇怪的行为。有什么想法解决这个问题吗?
亲切的问候, 亚历