Question

由于这个主题（相当老，这就是我要开设一个新主题的原因）Animating SVG path fill bottom-top

我终于成功地从底部到顶部制作了SVG动画：

<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
     <stop offset="0%" stop-opacity="0" stop-color="#76b442">
          <animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
          <animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="0.1s" begin="0" fill="freeze"></animate>
     </stop>
     <stop offset="100%" stop-opacity="0" stop-color="#76b442">
          <animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
          <animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="1s" begin="3s" fill="freeze"></animate>
     </stop>
</linearGradient>

https://jsfiddle.net/8v5f3cgk/

唯一的问题是我要使其从上到下循环。而且我不确定如何做到这一点？

非常感谢

带有循环的SVG linearGradient动画

0 个答案: