如何实现SVG填充加载动画？已尝试方案无效求解决

问题分析 #

你之前的尝试存在两个核心错误：

• 渐变引用语法错误：fill="#url(green-fill)" 应为 fill="url(#green-fill)"（多了多余的#前缀）
• 渐变动画逻辑不合理：两个stop同步偏移无法形成"填充进度"的视觉效果

方案一：修正线性渐变动画 #

通过调整垂直方向的线性渐变stop位置，让填充颜色逐步从底部向上覆盖整个SVG形状：

<svg width="302" height="245" viewBox="0 0 302 245" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 垂直方向线性渐变，设置动画让填充颜色从底部向上覆盖 -->
    <linearGradient id="progress-fill" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#11453B" />
      <stop offset="0%" stop-color="#D9EBCD">
        <animate 
          dur="4s" 
          attributeName="offset" 
          from="0%" 
          to="100%" 
          fill="freeze"
          repeatCount="indefinite" />
      </stop>
    </linearGradient>
  </defs>
  <!-- 原SVG路径，使用渐变填充 -->
  <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" 
        fill="url(#progress-fill)" />
</svg>

方案二：遮罩+矩形动画（更灵活） #

通过遮罩将原SVG形状作为显示区域，用矩形从底部向上移动实现填充效果，可灵活调整方向和速度：

<svg width="302" height="245" viewBox="0 0 302 245" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 用原SVG路径作为遮罩 -->
    <mask id="shape-mask" maskUnits="userSpaceOnUse">
      <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" 
            fill="white" />
    </mask>
  </defs>
  <!-- 显示底色 -->
  <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" 
        fill="#D9EBCD" />
  <!-- 带动画的填充矩形，应用遮罩 -->
  <g mask="url(#shape-mask)">
    <rect x="0" y="245" width="302" height="245" fill="#11453B">
      <animate 
        dur="4s" 
        attributeName="y" 
        from="245" 
        to="0" 
        fill="freeze"
        repeatCount="indefinite" />
    </rect>
  </g>
</svg>

额外说明 #

• 方案一适合简单单色填充，通过渐变偏移实现；方案二更灵活，可调整矩形移动方向（如从左到右）、速度，甚至添加颜色变化
• repeatCount="indefinite" 会让动画循环播放，若只需一次可删除该属性
• fill="freeze" 会让动画结束后停在最后一帧，不需要可改为fill="remove"

内容的提问来源于stack exchange，提问作者Daniel Obode