如何沿指定路径填充SVG异形厚形状实现连续加载动画效果

这类厚异形路径的连续填充效果，用SVG原生属性加CSS动画就能实现，不需要引入额外依赖，核心是利用描边动画或者蒙版控制填充显示范围： #

方案1：描边模拟填充（最简单，纯CSS可实现） #

不需要调整原路径的形状，把填充逻辑转成描边动画就能实现跟随路径移动的效果：

1. 保留原path作为浅灰色占位背景，再复制一份完全相同的path放在上层
2. 给上层path做如下设置：
   • 取消填充，设置为你需要的填充色描边
   • 描边宽度调整到刚好完全覆盖原形状的宽度，你这个255尺寸的视图设为90即可适配
   • 先获取路径总长度：运行JS代码document.querySelector('#Loader path').getTotalLength()可拿到，当前路径总长度约为310
   • 用stroke-dasharray控制填充块的长度和空隙长度，用stroke-dashoffset控制填充块的移动进度

你可以根据需求调整stroke-dasharray的第一个参数修改填充块长度，调整动画时长修改移动速度。

完整可运行代码示例 #

<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255" width="255" height="255">
  <!-- 底层占位背景 -->
  <path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
        c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
        c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
        c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
        c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z" fill="#eee"/>
  <!-- 上层动画填充层 -->
  <path class="spinner-fill" d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
        c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
        c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
        c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
        c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z" 
        fill="none" stroke="#f00" stroke-width="90" stroke-linecap="butt"/>
</svg>
<style>
.spinner-fill {
  /* 第一个参数为填充块长度，第二个参数为空隙长度（设置为总长度两倍即可保证填充块之间有空隙） */
  stroke-dasharray: 120 620;
  animation: fillMove 2s linear infinite;
}
@keyframes fillMove {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    /* 偏移量走满路径总长度+空隙长度，实现填充块走到终点后直接退出的效果 */
    stroke-dashoffset: -930;
  }
}
</style>
---
## 方案2：蒙版控制填充（适合复杂填充效果）
如果你的填充是渐变、纹理这类特殊效果，就用蒙版方案：
- 把你要的填充内容放在SVG最下层
- 把异形路径作为蒙版，蒙版内部做一个沿着路径移动的白色色块，只有白色色块覆盖的区域填充内容才会显示，即可实现相同的动画效果

内容的提问来源于stack exchange，提问作者C.Hillert