动画SVG属性，如填充颜色，无需第三方库

Question

如何使SVG circle的填充颜色从给定的开始（不透明的黑色）到给定的结尾（透明/无）进行动画处理。这应该由JavaScript函数触发，动画是一次持续几百毫秒。如何在不使用Snap.svg等第三方库的情况下使用DOM / CSS执行此操作？

所以当调用我的回调时

• 立即设置fill: black
• 在200毫秒的时间内过渡到fill: none

Answer 1

使用纯JS可以实现这一目标。这个线程有一个功能，可以满足您的要求：  Animate without JQuery。

该函数将元素，属性设置为动画，以及以ms为单位的速度来执行动画。在你的情况下，这样的事情是合适的animate(circle, fill, 300)。你可能不得不改变它以适应降低的alpha值，但这就是这个想法。

Answer 2

尝试使用<animate>功能。这是一个没有外部库的demo。

您可以从此SO answer

触发动画