1、接上篇SVG动画的属性详解
1.1 animation参数
1.1.1 attributeName
你想改变的属性名称，① 可以是元素直接暴露的属性，例如，以上案例出现的改变x, y又或者font-size; ② 可以是CSS属性。例如，透明度opacity.
1.1.2 attributeType
attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。
我想大家都有和我一样的疑问：“既然浏览器酱可以自己判断属性类别，那这个属性还有什么意义吗？”可能某些属性，XML有其作用，CSS也有其作用，例如font-size, 此时就需要明确下归属。
1.1.3 from to by values dur
from = ““
动画的起始值。
to = ““
就是to的值
指定动画的结束值。（绝对）
by=””
by最后的结束值=from的值+by的值
指定动画的结束值（相对）
Values=””（可以存在多个）
dur = ““
完成动画的时间
1.1.4 begin end
begin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的beigin="3s"只是最简单最基本的表示。
begin的定义是分号分隔的一组值。看到没？是一组值，单值只是其中的情况之一。例如，beigin="3s;5s"表示的是3s之后动画走一下，6s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）。所以，如果一次动画时间为3s, 即dur="3s"，同时没有repeatCount属性时候，我们可以看到动画似乎连续执行了2次。
begin的值可以是触发事件
begin的值可以是某个动画执行n次之后
1.1.5 repeatCount,repeatDur
repeatCount表示动画执行次数，可以是合法数值或者”indefinite“（动画循环到内存耗尽）。
repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite（动画循环到内存耗尽）。
作者：陆家嘴种菜
链接：https://www.jianshu.com/p/f0f5e2ababea
随时随地看视频
