动画SVG属性，如填充颜色没有第三方库

Animate SVG property such as fill color without third-party library

本文关键字：第三方 颜色 填充 SVG 属性 动画      更新时间：2023-09-26

如何使SVG circle的填充颜色从给定的开始(不透明的黑色)到给定的结束(透明/无)动画一次。这应该由JavaScript函数触发，动画是一个持续几百毫秒的一次性镜头。我怎么能做到这一点与DOM/CSS，而不必在第三方库，如Snap.svg绘制?

当我的回调被调用时

  • 立即设置fill: black
  • 200ms到fill: none的过渡

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

你可以从这个SO答案中触发动画

使用纯JS可以实现这一点。这个线程有一个函数，将做你所要求的:动画没有JQuery。

函数接受元素、要动画的属性和执行动画的速度(以毫秒为单位)。在你的情况下，这样的东西将是合适的animate(circle, fill, 300)。您可能需要稍微修改一下以适应alpha值的减小，但这就是思路。

相关文章：