使用 JavaScript 的 SVG 填充动画

【问题标题】：SVG fill animation using javascript使用 JavaScript 的 SVG 填充动画
【发布时间】：2015-12-07 14:42:33
【问题描述】：

我有一个 svg 图片。我想在这个图像上创建一个“填充动画”，以便图像将从图像的一端开始填充一种颜色，然后继续用某种颜色完全填充图像。比如说，在图像中，颜色将从最右边开始填充，然后慢慢地继续填充，就好像它正在绘制实际图像一样。这可以在javascript中完成吗？

【问题讨论】：

您可以通过使用线性渐变填充形状然后为停止设置动画来实现此目的
我有一张 svg 图片。我使用 raphael-svg-import-classic 插件来导入 svg 图像。现在我需要对元素执行填充动画。

标签： html animation svg raphael fill

【解决方案1】：

最简单的方法可能是将 jQuery 与名为 Velocity 的 3rd 方库混合使用。

Velocity 是一个专门处理颜色、变换、循环、缓动、SVG 和滚动动画的库。

$("#rect")
  .delay(1000)
  .velocity({
    fill: "#ff0000",
    height: "100",
    width: "100"
  }, {
    duration: 1000
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<svg>
  <rect id="rect" width="25" height="25" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" />
</svg>

显然，这个演示非常简单，但是有很多自定义选项可用，如果您的问题中没有任何先前的代码，则很难获得您正在寻找的确切效果。

【讨论】：