Javascript 从顶部而非左侧捕捉SVG路径动画

我有一些SVG的，我想动画悬停，我现在有90%，但是，实际的动画看起来不太好，我希望它看起来几乎是向上滑动，但在这一刻，它看起来好像是从左边进出

我在这里创作了一把小提琴：

如果有人能看一下并帮助整理动画或解释它是如何工作的，那就太好了

---

提前感谢

更新：使用了更好的

defaultWhitePath

，现在可以平稳过渡了

        //Define our Paths
        var defaultBluePath = "M0,0 L0,25 C42,36 50,11 90,23 L90,0";
        var defaultWhitePath = "M0,25 C42,36 50,11 90,23 L90,25 C50,11 42,46 0,30Z";

        //Define our Hover Paths
        var hoverBluePath = "M0.02,0 L0,13 L90,13 L90,0 Z";
        var hoverWhitePath = "M0,13 L90,13";

---

上述变化在FF上进行了测试

进一步简化它。把它分解成一条路径，让它像你想的那样移动。这很难理解，因为不确定你到底想要它是什么样子。如果你想让它向上滑动，为什么不在上面加一个变换来移动呢？那太完美了！这正是我想要达到的！在Chrome中也非常有效！非常感谢，这一次帮我省去了很多麻烦。

        //Define our Paths
        var defaultBluePath = "M0,0 L0,25 C42,36 50,11 90,23 L90,0";
        var defaultWhitePath = "M0,25 C42,36 50,11 90,23 L90,25 C50,11 42,46 0,30Z";

        //Define our Hover Paths
        var hoverBluePath = "M0.02,0 L0,13 L90,13 L90,0 Z";
        var hoverWhitePath = "M0,13 L90,13";