带有morphSVG动画的SVG菜单悬停

Question

我想创建一个SVG菜单，将其悬停时将文本从一个SVG更改为其他文本，并使字体变形。

我有3个问题：

1）如何添加必要的代码，以便动画可以在悬停上工作，而不是像现在那样自动使用“ for”在不同的路径上工作。

2）我该怎么做，超链接仅适用于文本区域，而不适用于SVG的所有区域。我尝试使用内联块，但无法正常工作，现在超链接比文本大得多。

3）正如您在我的第二个示例中看到的那样，当L与其他字母在同一路径内时，L会失真，但是在单个路径中时，此字母的动画非常奇怪。有什么办法解决这个问题？

我愿意学习没有morphSVG的其他方法。

我已经有一个动画和链接的示例： https://codepen.io/MZBS/pen/ZdPOmg

var button2 = document.getElementById("toggle2");
for (i = 0; i < 5; i++) {
  TweenMax.to("#start" + i, 1, {
    morphSVG: "#end" + i,
    yoyo: true,
    repeat: -1,
    repeatDelay: 0.5,
    ease: Power1.easeInOut
  });
}

我以前尝试过每个单词一个路径，但是我需要不同的路径才能正常工作。因此，我有一个可以实际使用的示例，但在此之前我需要与另一个示例一起使用： https://codepen.io/MZBS/pen/GbPOMd

var button2 = document.getElementById("toggle2");


var morph = new TimelineMax({paused:true});
morph.to("#gear", 1, { morphSVG: "#x", ease:Power1.easeInOut });

button2.addEventListener("mouseenter", function() {
  if (morph.progress() === 0) { //if it's at the beginning, start playing
    morph.play();
  } else { //otherwise toggle the direction on-the-fly
    morph.reversed( !morph.reversed() );
  }
});

所以最后，我需要最后一个动画以不同的路径工作，就像在我的第一个示例中那样悬停。