如何使用 velocity.js 为 SVG 描边颜色过渡设置动画？

Question

我想制作一个 SVG 笔触颜色从红色变为绿色的动画。 这可能吗？ 我已经设法用 "fill" 属性 做到了，但由于某种原因我不能用中风做到这一点。

Answer 1

一个解决方案是：

  .velocity({
    strokeRed: 0,
    strokeGreen: 255,
    strokeBlue: 0
    });

我的理解是线性 1s 应该是默认时间，也许添加一个命名缓动可以实现，

  .velocity({
    strokeRed: 0,
    strokeGreen: 255,
    strokeBlue: 0
    }, "easeInSine");

此外，您可以简单地使用 "stroke"，但请注意，stroke 需要一个十六进制值，不像上面列出的那些可以是无单位或百分比。