progressive fill of an svg

Question

I have a SVG logo and it needs to be animated indefintely with a progressive fill from left to right, and then in reverse order from right to left

I've tried to use this but with no success

            <linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#808080">
                    <animate attributeName="stop-color" values="#808080; #FFFFFF" dur="1s" fill="freeze" repeatCount="indefinite" /> 
                </stop>
                <stop offset="100%" stop-color="#FFFFFF">
                    <animate attributeName="stop-color" values="#FFFFFF; #808080" dur="1s" fill="freeze" begin="1s" repeatCount="indefinite" /> 
                </stop>
            </linearGradient>
            <symbol viewBox="0 0 320 320" id="logo" fill="url(#lightGradient)">

Any suggestion ?

Regards

Answer 1

Like this? It animates from left to right and back again as per your requirement.

<svg>
  <defs>
    <linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#808080">
                    <animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" /> 
                </stop>
                <stop offset="0%" stop-color="#FFFFFF">
                    <animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" /> 
                </stop>
            </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#lightGradient)"/>
</svg>