像加载栏一样动画 svg 填充

Answer 1

是这样的吗？该形状是使用矩形上的蒙版制作的。蒙版内部有一条宽描边的路径，覆盖了形状的路径。对路径进行动画处理将“显示”蒙版的白色部分。

<svg width="302" height="245" viewBox="0 0 302 245" fill="#D9EBCD" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask01">
      <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667 5.7234 244.667.9477 239.891.9477 234 .9477 228.109 5.7234 223.333 11.6144 223.333 17.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"/>
      <path d="M 10 2 H 276 C 288 2 300 12 300 26 V 210 C 300 220 292 234 276 234 H 0" stroke="black" stroke-width="25" fill="none" stroke-dasharray="100 100" pathLength="100">
        <animate dur="4s" attributeName="stroke-dasharray" from="100 100" to="0 100" fill="freeze" />
      </path>
    </mask>
  </defs>               
  <rect width="302" height="245" mask="url(#mask01)" fill="#D9EBCD" />                   
</svg>