如何用anime.js实现SVG填充动画？是否需修改填充属性？

当然可以用anime.js实现SVG填充动画啦！你完全不需要修改填充属性的形式，不过得根据你想要的动画效果选合适的实现方式，下面给你几种实用的方案：

方案1：淡入式填充动画（最简单） #

如果只是想要填充色从无到有（或者从透明到不透明）的淡入效果，直接动画fill-opacity属性就可以，和你现有的描边动画完美兼容。

比如可以让填充动画和描边动画同步进行，或者等描边完成后再开始填充：

$(function() {
  // 你的原有描边动画
  var lineDrawing = anime({
    targets: '#layer1 path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });

  // 新增的填充动画（和描边同步淡入）
  var fillAnimation = anime({
    targets: '#layer1 path',
    fillOpacity: [0, 1], // 从完全透明到完全不透明
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 }, // 和描边的延迟保持一致
    direction: 'alternate', // 和描边一样来回动画
    loop: true
  });
});

如果想要描边完成后再开始填充，只需要调整填充动画的延迟，比如把delay改成function(el, i) { return i * 250 + 1500 }，这样每个路径的描边动画跑完1500ms后，填充动画才开始。

方案2：跟随描边路径的填充动画 #

如果想要实现“描边画到哪里，填充就跟到哪里”的效果，我们可以用SVG的clipPath（裁剪路径）配合描边动画来实现：

步骤1：修改SVG代码 #

在SVG的<defs>里添加一个裁剪路径，里面放一个和目标路径完全一致的形状（只保留描边属性，填充设为none），然后给需要填充的路径设置clip-path属性：

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" ...>
  <defs>
    <!-- 裁剪路径：和目标路径一样的形状，用来控制填充的显示范围 -->
    <clipPath id="fillClip">
      <path id="clipShape" d="这里放你#layer1 path的d属性值" fill="none" stroke="#ffffff" stroke-width="1" />
    </clipPath>
  </defs>
  <g id="layer1">
    <!-- 带裁剪的填充路径 -->
    <path d="你的路径d值" fill="#你想要的填充色" clip-path="url(#fillClip)" />
    <!-- 如果需要保留原来的描边路径，可以继续保留 -->
    <path d="你的路径d值" fill="none" stroke="#你的描边色" stroke-width="2" />
  </g>
</svg>

步骤2：用anime.js动画裁剪路径的描边 #

通过动画裁剪路径里#clipShape的strokeDashoffset，让裁剪范围跟着描边路径逐步显示，这样填充色就会跟着描边的进度出现：

$(function() {
  // 原有描边动画
  var lineDrawing = anime({
    targets: '#layer1 path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });

  // 裁剪路径的描边动画（控制填充显示）
  var fillClipAnimation = anime({
    targets: '#clipShape',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });
});

这样就能实现描边画到哪里，填充就覆盖到哪里的效果啦！

总结 #

• 简单的淡入填充：直接动画fill-opacity即可，成本最低
• 跟随路径的填充：用clipPath配合描边动画实现，效果更酷炫

根据你的需求选对应的方案就好啦！

内容的提问来源于stack exchange，提问作者Alexander Solonik