SVG系列 — 动画元素<animate>

<animate>标签属性详解（参考MDN）

---

<animate>位于形状标签内部，用来定义此形状在某一时间点发生的某种变化。在持续时间里，由开始值过度到结束值。

1. 属性
attributeName     定义需要改变的属性名
attributeType     指定目标属性和它相对应的值处于哪个命名空间里   值 css | xml | auto
from
to
dur                   动画持续时间
repeatCount    动画发生次数   值 css | xml | auto
以上属于专有属性
values 对应attributeName需要改变的值的属性，具体可以参考以下两个例子：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="100" width="30" height="30" fill="green">
    <animate attributeType="XML"
      attributeName="y"
      from="50" to="100"
      dur="1s"  
      repeatCount="indefinite"/>
  </rect>
  <circle cx="240" cy="100" r="50" fill="#2315ff">
     <animate attributeType="CSS" 
        attributeName="fill" 
        values="orange;#4ed8a1;#a2d8d5" 
        dur="5s" 
        repeatCount="indefinite"/>
    </circle>
</svg>