Javascript 使用Jquery更改SVG路径行为

这是我的SVG路径动画实验-

正如您看到的，当页面加载时，路径的颜色为灰色，然后在鼠标悬停时变为白色。但我希望在画线/执行结束时，它会变回灰色。我该怎么做

---

此外，如果路径尚未完成绘制，并且将鼠标从形状上移开，则它会绘制路径两次。为什么会这样？

这里发生了两件事：

鼠标悬停在1px宽的路径上。。。因此，如果您移动到图像的中间，观看动画，然后将鼠标移出图像，您将再次通过该线，重新触发动画

一旦动画触发/完成，可能需要使用.off删除mouseover事件

看起来真的很酷

function simulatePathDrawing(path) {
  //var path = document.querySelector('.squiggle-animated path');

  var length = path.getTotalLength();
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition = 'none';

  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;

  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 5s ease-in-out';

  // Go
  path.style.stroke = '#fff';
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '1px';
  path.style.fill = '#333';

}

var chars = $('.squiggle-animated path').on('mouseover', function(e) {
  simulatePathDrawing(this);
});