title: Svg fill animation for the given path
body: <p>I am trying to animate an arrow from left to right.The code of my arrow's path is given below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'&gt; 
      &lt;g transform = "translate(0,0)"&gt; 
        &lt;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"&gt; 
            &lt;animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"&gt;&lt;/animate&gt;
        &lt;/path&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above is the svg path content of my arrow.</p>
  
  <p>Kindly anyone help me how to fill the path from left to right. Waiting for quick response</p>