SVG进阶-SMIL动画

SMIL

---

SMIL是指同步多媒体集成语言（Synchronized Multimedia Integration Language）SVG相关的动画都是基于这种语言标准实现的

SMIL允许你做下面这些事情：

• 动画元素的数值属性（X, Y, …）
• 动画属性变换（平移或旋转）
• 动画颜色属性
• 沿着运动路径运动

其中前面三条CSS3都是可以实现的，就是最后一条，暂时还不能实现。当然啦SMIL这门标准的订立不是为了解决CSS3的缺陷的。

SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。

SVG 动画标签参数详解

---

前面章节中，我们了解了SVG具有四种主要的动画标签<set>,<animate>,<animateTranform>,<animateMotion>。

这一章主要讲其中参数的作用：

attributeName = <attributeName>

---

要变化的元素属性名称，可以是SVG标签上的属性，如font-size，width，height等，也可以是CSS属性，如opacity这些。这个属性跟下面的attributeType 一起使用。

attributeType=“CSS | XML | auto”

---

attributeType支持三个固定参数"CSS | XML | auto"，用来表明定义在attributeName上面的属性值。比如我们定义的属性是属于SVG标签上的属性，那么直接设置attributeType=‘xml’，如果是设置css属性，则设置type值为css。auto为默认值，自动判别attributeName的属性是属于XML还是CSS（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

之所以需要这个attributeType，是因为有些属性，其实即是属于XML也是属于CSS，因此在设置的时候就需要标明一些属性的类别。

from，to，by，values

---

上面4个属性是一个系列的，用于表示动画执行过程的状态

from = “<value>” 动画的起始值。

to = “<value>” 指定动画的结束值。

by = “<value>” 动画的相对变化值。

values = “<list>” 用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

from, to, by, values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：

a. 如果动画的起始值与元素的默认值是一样的，from参数可以省略。

b. （不考虑values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。

c. 如果to,by同时出现，则by打酱油，只识别to。

e. values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by 的值都会被忽略。 那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <text font-size="120" y