svg 的渐进填充

Question

我有一个 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)">

有什么建议吗？

此致

Answer 1

像这样？它根据您的要求从左到右再返回动画。

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

svg 的渐进填充

progressive fill of an svg

svg

fill