svg SMIL animation学习

一、五大元素

1. <set>
2. <animate> 动画
3. <animateColor> 动画颜色
4. <animateTransform> 变换动画效果
5. <animateMotion> 可以让SVG各种图形沿着特定的path路径运动

二、属性

1. attributeName：可以是text元素上的属性或则所改变的css属性 eg：x，y，transform，opacity
2. attributeType：CSS|XML|auto  可以不设置，让浏览器自己去判断
3. repeatCount：
4. to：去到哪个坐标
5. by：同to差不多，但是to出现的时候，by只是打酱油
6. from：从哪个坐标开始
7. value：可以一个值或者多个值，当多个值的时候可以实现来回跑的动画效果 eg:value="160;40;160"
8. dur：持续的时间
9. begin：开始的时间   eg:
   1. begin="3s;6s"表示三秒走一次，六秒走一次；
   2. 可以设置为x.end表示x的执行完再执行；
   3. 可以设置为circle.click表示点击圆圈后执行
   4. 设置为x.repeat(2)表示id为x的元素的动画重复两次后执行
   5. 设置为accessKey(s)按下某个按键动画开始，兼容火狐，对谷歌不起作用
   6. 设置为indefinite表示无限等待，需要beginElement()方法触发或者指向该动画元素的超链接(SVG中的a元素)。var animate = document.getElementsByTagName("animate")[0];
      if (animate) {
          document.getElementById("svg").onclick = function() {
              animate.beginElement();
          };
      }
10. rotate
11. calcMode, keyTimes, keySplines
    1. calcMode 支持4个值：discrete | linear | paced | spline. 中文意思分别是：“离散”|“线性”|“踏步”|“样条”。
    2. keyTimes = "<list>" 存放时间点
12. repeatCount：设置动画执行次数，可以是合法数值或者“indefinite”(动画循环到电脑死机),
13. repeattDur：设置重复动画的总时间，可以是普通时间值或者“indefinite”（动画循环到电脑死机）
14. fill：动画间隙的填充方式。默认值为remove，表示时间结束后回到原点，另外一种是freezem，表示元素保持动画结束后的动作
15. accumulate：表示累积的意思，默认值为none，另外一个是sum，表示动画结束时候的位置作为下一次动画的起始位置
16. additive：控制动画是否附加，默认值为replace，另外一个是sum，表示动画的基础知识会附加到其他低优先级的动画上
17. svg.pauseAnimations(); 动画的暂停
18. svg.unpauseanimations(); 动画的暂停