svg的渐进填充

我有一个SVG徽标，它需要以从左到右的渐进填充方式进行独立动画，然后以从右到左的相反顺序进行动画

我试过用这个，但没有成功

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

有什么建议吗

---

像这样看待

？它可以根据您的要求从左到右、再从左到右设置动画

---

像这样吗？它可以根据您的要求从左到右、再从左到右设置动画

非常好，是否可以在动画改变侧面之前“暂停”动画？我这次更新了它，如果您需要任何其他新的或不同的功能，最好问一个新问题。非常好，是否可以在动画改变侧面之前“暂停”动画？我这次更新了它，如果您需要任何其他新的或不同的功能，最好问一个新问题。