Svg animación de relleno para la ruta dada

Estoy tratando de animar una flecha de izquierda a derecha. El código de la trayectoria de mi flecha se muestra a continuación:

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 
    <g transform = "translate(0,0)"> 
      <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1"> 
          <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
      </path>
    </g>
</svg>

Lo anterior es el contenido de la ruta svg de mi flecha.

Amablemente, alguien me ayude a completar el camino de izquierda a derecha. Esperando respuesta rápida

Respuestas a la pregunta(3)

Su respuesta a la pregunta