svg动画

两个颜色渐变来回切换

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <ellipse id="orange-circle-6" cx="200" cy="70" rx="85" ry="55" fill="red" />
    
    <animate
       xlink:href="#orange-circle-6"
       attributeName="fill"
       from="red"
       to="blue"
       dur="3s"
       begin="0s; changeColor2.end"
       fill="freeze"
       id="changeColor"/> 
    <animate
       xlink:href="#orange-circle-6"
       attributeName="fill"
       from="blue"
       to="red"
       dur="3s"
       begin="changeColor.end"
       fill="freeze"
       id="changeColor2"/>
</svg>

</body>
</html>

 

posted @ 2020-03-18 16:26  1156740846  阅读(97)  评论(0)  编辑  收藏  举报