I want to fill the color of the svg polygon from the initial rectangle(start) to the final rectangle(2). I tried using linear gradient to animate it from left to right but i couldn't. Is there a way to animate the fill of a polygon. I took reference from this question - Svg fill animation for the given path
Like this is the kind of effect i need to achive, i tried the animate code in that but it didn't work. Sorry new to this.
jsFiddle -https://jsfiddle.net/68xm799v/
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 674 371" style="enable-background:new 0 0 674 371;" xml:space="preserve">
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<polygon class="st0" fill="url(#left-to-right)" points="214,49 214,54 669,54 669,183 0,183 0,187 0,188 0,314 0,319 20,319 20,314 5,314 5,188 669,188
674,188 674,183 674,54 674,49 "/>
<g><rect x="19.4" y="0.2" class="st1" width="200" height="113"/></g>
<g><text transform="matrix(1 0 0 1 82.6778 51.5475)" class="st2 st3 st4">End</text></g>
<g><rect x="234" class="st1" width="200" height="113"/></g>
<g><rect x="449" class="st1" width="200" height="113"/></g>
<g><rect x="19" y="129" class="st1" width="200" height="113"/>
</g><g><rect x="20" y="258" class="st1" width="200" height="113"/></g>
<g><rect x="234" y="258" class="st8" width="200" height="113"/></g>
<g><rect x="234" y="129" class="st1" width="200" height="113"/></g>
<g><rect x="449" y="129" class="st1" width="200" height="113"/></g>
<g><text transform="matrix(1 0 0 1 297.5755 309.5475)" class="st2 st3 st4">start</text></g>
<polygon class="st5" points="234,333 216,321 234,309 "/>
<polygon class="st5" points="215,333 197,321 215,309 "/>
</svg>
