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

【问题标题】：Animate SVG property such as fill color without third-party library动画 SVG 属性，如填充颜色，无需第三方库
【发布时间】：2015-07-22 17:20:34
【问题描述】：

如何使 SVG circle 的填充颜色从给定的开始（不透明的黑色）到给定的结束（透明/无）动画一次。这应该由 JavaScript 函数触发，并且动画是持续几百毫秒的一次性动画。如何使用 DOM/CSS 做到这一点，而无需在 Snap.svg 等第三方库中进行绘制？

所以当我的回调被调用时

【问题讨论】：

【解决方案1】：

试试<animate> 函数。这是一个没有外部库的demo。

你可以从这个SO answer触发动画

【讨论】：

【解决方案2】：

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

该函数采用元素、动画属性和执行动画的速度（以毫秒为单位）。在你的情况下，这样的事情是合适的animate(circle, fill, 300)。您可能需要稍微改变它以适应 alpha 值的下降，但这就是我们的想法。

【讨论】：