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

1 个答案: