Animação de preenchimento SVG para o caminho especificado

Estou tentando animar uma seta da esquerda para a direita. O código do caminho da minha seta é dado abaixo:

<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>

O acima é o conteúdo do caminho svg da minha seta.

Por favor, alguém me ajude a preencher o caminho da esquerda para a direita. Aguardando resposta rápida

questionAnswers(3)

yourAnswerToTheQuestion