Javascript 使用jquery设置SVG填充的动画？

我正在尝试使用jQuery来设置SVG路径的动画，然后在第一个动画完成后，使用持续时间和缓和功能设置SVG填充的动画

这可能吗

$(function() {
  $('svg').hover(function() {
    $(this).find('.social-circle').stop()
      .animate({'stroke-dashoffset': 0}, 1000, 'easeOutBounce')
      .css('fill', '#f4321e');
      console.log('on');
  }, function() {
    $(this).find('.social-circle').stop()
      .animate({'stroke-dashoffset': 900}, 1000, 'easeOutBounce')
      .css('fill', 'none');
  });
});

---

谢谢你的时间

一种方法是使用CSS转换（*），但您需要使

填充：透明

，而不是

填充：无

，如下（1）：

$（函数（）{
$（'svg'）.hover（函数（）{
$（'svg'）.find（'.social circle'）.stop（）
.animate（{'stroke-dashoffset'：0}，1000）
.css（{'fill'：'red'，'transition'：'fill 1s}）；
console.log（'on'）；
}，函数（）{
$（'svg'）.find（'.social circle'）.stop（）
.animate（{'stroke-dashoffset'：900}，1000）
.css（{'fill'：'transparent'，'transition'：'fill 1s}）；
});
})

可以。jQuery不制作颜色动画，但jQuery UI和各种插件都可以。或者你可以使用或@Mi creative，是的，我已经尝试过了，但它没有制作动画。当你说“这可能吗？”我以为你没有尝试就问了，这个why@adeneo-仍然不知道如何使用它进行颜色填充，可能是使用

element.classList.add（'newclass'）

@Mi creative-我见过它们，但在查看Snapsvg时，我没有找到任何好的文档或示例。Il checkout GSAP。