一：简介
由于Web是一个动态的媒介，SVG有支持实时动画能力。SVG的内容可以使用下面的方式添加动画：
1.使用SVG动画元素SVG文档片段可以描述基于时间对文档元素的修改。通过各种各样的动画元素，你可以定义动画的轨迹，淡入淡出效果，和对象的增大，缩小旋转或者改变颜色。
2. 使用SVG DOM。SVG DOM实现了DOM1和DOM2规范的主要部分。每一个属性和样式表对脚本来说是可访问的，并且SVG为了支持有效地动画脚本提供了附加的DOM接口。结果，实际当中任意类型的动画都可以取得。在脚本语言中的计时设置可以用来启动和控制动画元素。
3.SVG被设计成允许SMIL来使用动态和静态的SVG内容作为媒体组件。
二：动画元素
1.概要
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。在任意的支持SMIL动画的语言中，想寻求一份介绍方法和特征并值得信赖的文档，可以参考：
SMIL Animation overview 和
SMIL Animation animation model。但是对于下列的不在SMIL动画规范中的动画特征可以参考：
SVG extensions to SMIL Animation。
2.同SMIL动画的关系
参照SMIL动画，SVG是一种客户端语言，并且在本分规范当中介绍讲解附加的约束和规范是合理的。除了在任意的SVG规则特别提到的，正常在SVG动画元素和属性是在SMIL规范当中的。
SVG支持下列定义在SMIL动画规范中的动画元素。
|
动画元素名称
|
描述
|
|
"animate"
|
可以实时的改变标准的属性和属性值的取值
|
|
"set"
|
一个"animate"的简化集合，被用来修改非数值类型的属性值产生动画，例如"visibility"属性
|
|
"animateMotion"
|
沿着一个动画路径来移动元素
|
|
"animateColor"
|
实时的修改特定的颜色值产生动画
|
尽管SVG定义了"animateColor"，但是它已经被弃用了，替代它的是"animate"元素。除此之外，SVG还引入了下列可以兼容SMIL动画的继承：
|
名称
|
描述
|
|
"animateTransform"
|
实时的修改一个SVG的transformation属性，例如"transform"属性
|
|
"path"
|
SVG允许用SVG的路径属性来为一个"animateMotion"元素指定一个"path"属性
|
|
"mpath"
|
SVG允许一个"animateMotion"元素含有子属性"mpath"来引用一个SVG的"path"元素作为指定的动画路径
|
|
"keyPoints"
|
SVG在"animateMotion"上面添加了一个"keypoints"属性精确地控制路径动画的速率。
|
|
"rotate"
|
SVG在"animateMotion"上添加了一个"rotate"属性控制一个图形在沿路径运动的时候是否沿X轴方向偏转一个角度
|
为了兼容其他方面的语言，SVG使用
IRI references的一个
‘xlink:href’属性来表示可以作为动画目标的元素，就像SMIL3.0中声明的一样。
SMIL动画要求客户端语言定义文档开始和文档结束。由于一个"svg"有时可以作为一个XML文档树的根节点，有时可以作为一个XML父节点语法的组件，文档开始是一个给定的SVG文档被定义并在SVG元素的
SVGLoad event触发时下载。一个SVG文档片段的文档结束是在在这一点上文档片段被释放并不在被用户代理处理。然而，在一个SVG文档当中嵌套的SVG元素在这种情形下不会产生文档片段，并且不会定义一个独立的文档开始；嵌套的文档片段一直与为根"svg"元素定义的文档时间相关联。
对SVG来说，呈现时期表示着与一个给定的SVG文档片段的文档开始相关联的时间线的一个位置。SVG定义了比SMIL动画规范定义了更多的约束错误的处理。SMIL动画定义了在特定错误情形下错误处理行为，然而所有在SVG文档中的动画元素将因文档中任一个错误而停止。
3.动画元素示例
下面的示例展示了五种动画元素当中的每一种：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example anim01 - demonstrate animation elements</desc>
<rect x="1" y="1" width="798" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- The following illustrates the use of the 'animate' element
to animate a rectangles x, y, and width attributes so that
the rectangle grows to ultimately fill the viewport. -->
<rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!-- Set up a new user coordinate system so that
the text string's origin is at (0,0), allowing
rotation and scale relative to the new origin -->
<g transform="translate(100,100)" >
<!-- The following illustrates the use of the 'set', 'animateMotion',
'animate' and 'animateTransform' elements. The 'text' element
below starts off hidden (i.e., invisible). At 3 seconds, it:
* becomes visible
* continuously moves diagonally across the viewport
* changes color from blue to dark red
* rotates from -30 to zero degrees
* scales by a factor of three. -->
<text id="TextElement" x="0" y="0"
font-family="Verdana" font-size="35.27" visibility="hidden" >
It's alive!
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />
<animateMotion data-path="M 0 0 L 100 100"
begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
4.用于表示动画目标元素的属性
下列的动画属性通用所有的动画元素并标识了动画的目标元素。属性定义：
xlink:href="
<iri>"
一个到元素的
IRI reference，可以表示动画的目标并实时的修改。目标元素必须是当前文档片段的一部分。<iri> 必须准确的指定一个目标元素，这个目标元素可以可以成为给定动画的目标元素。如果<iri>指向多个目标元素，如果 给定的目标元素不可以附加指定的动画，如果给定的目标元素不是当前SVG文档片段的一部分，那么文档会发生错误。如果"xlink:href"属性没有被提供，那么目标元素将是当前动画元素的父元素。
参考独立动画在可作为特定的动画目标元素的类型约束的描述。除了在这份规范中明确提出的SVG特别的规则，这个属性的标准定义是在SMIL动画规范当中。特别地，参考：
SMIL Animation: Specifying the animation target
5.用于标识一个动画元素的目标属性
下面的属性都是动画元素目标属性，它们标识了实时改变的给定元素的属性值。属性定义：
attributeName="<attributeName>":
指定目标属性的名称。一个XMLNS前缀可以用来指明XML命名空间的属性。在当前的动画元素范围内，这个前缀可以被解读。除了在这份规范中明确提出的SVG特别的规则，这个属性的标准定义是在SMIL动画规范当中。特别地，参考：
SMIL Animation: Specifying the animation target
attributeType="CSS|XML|auto"
指定了与目标属性相关联的命名空间并定义了相关的值。属性值是下面中的一个：
CSS:这表明了，在这份规范当中，"attributeName"是一个可动画的CSS属性的名字。
XML:这指明了"attributeName"是一个为目标元素定义在默认的XML命名空间的XML属性的名字。如果"attributeName"的值带有一个XMLNS的
前缀，那么实现必须使用在定义在目标元素的相关联的命名空间。在规范当中，这个属性必须定义为可动画的。
auto: 实现应该匹配"attributeName"到目标元素的一个属性。这个实现必须先搜索CSS属性值列表作为一个匹配的属性值，如果没有范闲，再
为目标元素搜索默认的XML命名空间。默认值是"auto"。
除了在本规范中明确提到的SVG规范，标准的属性定义是在SML动画规范当中。特别的，参考：
SMIL Animation: Specifying the animation target
6.带命名空间的动画
下面的例子展示了在引用元素的范围内，一个命名空间前缀被解析成为一个命名空间，并且这个命名空间名称被用来标识被附加动画的属性：
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Demonstration of the resolution of namespaces for animation</title>
<!-- at the point of definition, the QName a:href resolves to the namespace
name "http://www.w3.org/1999/xlink" and the local name "href" -->
<g xmlns:a="http://www.w3.org/1999/xlink">
<animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
</g>
<!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
happens to be bound to the namespace prefix 'b' while the prefix
'xlink' is bound to a different namespace name -->
<g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
<image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
</g>
</svg>
7.动画步调和复合类型
步调的动画通过"to","from","by"和"values"等各种各样的动画值提出了距离的概念。距离是为了被"aniamteTransform"支持的缩放类型，颜色和变幻类型的子集。在下面的距离函数列表中，V
a
和 V
b代表了两个值，它们之间的距离被计算。由于步调动画打算产生一个同步于变化的动画，那么为所有数据类型定义距离函数是没有意义的。距离可以为那些值为n维向量的类型被有效地定义。例如：一个<length>值是一个标量值，一个<color>值是一个三维向量。因此这些类型的属性可以让步调动画应用到它们上面。另一方面，一个<list-of-length>是一个标量的序列，并且<list-of-points>是一个二维向量的序列。因而这些类型不会有一个距离函数的定义并且不能有步调动画应用到它们上面。被步调动画所支持类型的距离函数如下所示：
<coordinate>,<integer>,<length>,<number>
distance(V
a, V
b) = |V
a
− V
b|
<color>
distance(V
a, V
b) = sqrt((V
a.red − V
b.red)
2
+ (V
a.green − V
b.green)
2
+ (V
a.blue − V
b.blue)
2), where:
V
i.red is the red component of the V
i
color value,
V
i .green is the green component of the V
i
color value, and
V
i .blue is the blue component of the V
i
color value.
Transform定义中的"translate"类型
distance(V
a, V
b) = sqrt((V
a.tx − V
b.tx)
2
+ (V
a.ty − V
b.ty)
2), where:
V
i.tx is the
x
component of the V
i
translation transform value, and
V
i.ty is the
y
component of the V
i
translation transform value.
Transform定义中的"scale"类型
distance(V
a, V
b) = sqrt((V
a.sx − V
b.sx)
2
+ (V
a.sy − V
b.sy)
2), where:
V
i.sx is the
x
component of the V
i
scale transform value, and
V
i.sy is the
y
component of the V
i
scale transform value.
Transform定义中的"rotate","skewX","skewY"类型
distance(V
a, V
b) = sqrt((V
a.angle − V
b.angle)
2), where:
V
i.angle is the angle component of the V
i
rotation or skew transform value.
其他数据类型的距离函数没有定义。如果calcMode="paced"被用到一个不是上面列出的类型动画属性上，那么动画的效果将是undefined。SVG用户代理可以选择演示动画就像calcMode="linear"，但是这是不必要的。用户被推荐不要指定步调动画的类型不是上面列出的。
8.控制动画时间的属性
下面的属性是动画时间属性。它们通用于所有的动画元素并且控制动画的事件，包括引起动画的开始和结束，动画是否重复运行，动画是否在结束时保持结束时的状态。在语法描述中，下面可选的空白被指明为"S",定义如下：S ::= (#x20 | #x9 | #xD | #xA)*
属性定义：
begin
= "
begin-value-list"
定义了元素开始的时间。属性值是用分号分隔的值序列。
begin-value-list ::=
begin-value
(S? ";" S? begin-value-list )?
一个用分号分隔的值序列。起始值的解释详尽参阅SMIL动画章节：
"Evaluation of begin and end time lists"
begin-value ::= (
offset-value
|
syncbase-value
|
event-value
|
repeat-value
|
accessKey-value
|
wallclock-sync-value|
"indefinite"
)
描述元素的起始
offset-value ::= ( S? "+" | "-" S? )? (
Clock-value
)
对SMIL动画来说 ，它描述了元素起始作为一个从隐式实时数据库的补偿。对SVG，隐式实时数据库被定义为相关的文档起始。Negative起始时
间是完全有效地并易于计算， 只要它是一个确定的文档起始时间。
syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S?
Clock-value
)?
描述了一个实时数据库和一个从这个实时数据库的可选择性补偿。元素的起始时间被定义关联于另一个动画的开始时间或者活动时间。一个实时
数据库是由一个指向另外一个被跟随着开始或者结束来表示是否同步于引用动画元素的开始或者结束的动画元素的ID引用组成的。
event-value ::= ( Id-value "." )? ( event-ref ) ( S? ("+"|"-") S?
Clock-value
)?
描述一个事件和一个元素开始确定的可选择性补偿。动画的开始被定义为关联于事件启动的事件。对一个给定的基于事件元素的有效的事件符号列
表是一个对
SVG DTD定义的给定的元素的有效的事件属性列表。有一点不同是主要的"on"要从事件名称上移除。（例如，动画的事件名称
是"click",而不是"onclick"）。所有SVG支持的事件列表可以在
Complete list of supported events中发现。详细的基于事件的计时在
repeat-value ::= ( Id-value "." )? "repeat(" integer ")" ( S? ("+"|"-") S?
Clock-value
)?
描述一个合格的重复次数。元素的起始被定义相关于带有规定的迭代值的重复事件启动时间。
accessKey-value ::= "accessKey(" character ")" ( S? ("+"|"-") S?
Clock-value
)?
描述了一个元素开始确定的accessKey。元素被定义关联于accessKey字母被用户输入的时间。
wallclock-sync-value ::= "wallclock(" wallclock-value ")"
用一个现实世界时钟值来描述元素的开始。壁钟时间语法是是基于
Representation of dates and times
[
ISO8601]定义的语法
"indefinite"
动画的起始将会被一个 "beginElement()"方法调用或者一个链接到元素的超链接确定。动画的DOM方法在
DOM interfaces中描述。基于超链接的
除了在本规范中明确提出的SVG特殊规则，本属性的标准定义在
SMIL Animation规范中。特别的可以参考
SMIL Animation: 'begin' attribute
([
SMILANIM], section 3.2.1)。
dur=
Clock-value
| "media" | "indefinite"
指定了简单的时间间隔。属性值是下面其中之一：
用
presentation time 指明了简单间隔的长度。值必须大于0.
"media"
把简单的时间间隔指定为固有的媒体间隔时间。仅对定义在媒体当中的元素有效。（对SVG来说，如果被指定为"media"，那么应该忽略这个属性）
"indefinite"
指定简单的时间间隔为无限。
如果一个动画元素没有指定"dur"属性，那么动画时间就是无限的。但是这样设置的动画插入是不会工作的（尽管这可能对"set"有用）。除了在本规范中明确提到的SVG特殊的规则，这个属性的
标准定义在
SMIL Animation中。特别的，可以参考：
SMIL Animation: 'dur' attribute
end="
end-value-list"
为动画约束活动时间设置的结束值。这个属性值是一个用分号分隔的值列表。
end-value-list ::=
end-value
(S? ";" S? end-value-list )?
一个用分号分割的结束值列表。下面是是插入结束值列表的结束值详细细节.
end-value ::= (
offset-value
|
syncbase-value
|
event-value
|
repeat-value
|
accessKey-value
|
wallclock-sync-value
| "indefinite" )
描述了运动的结束。
一个值为"indefinite"表示动画的结束将会通过一个结束元素的方法调用来确定。除了在本规范中明确提到的SVG特殊规则，本属性的标准定义在
SMIL Animation 规范中。特别的，
详细细节可以参考：
SMIL Animation: 'end' attribute
min
=
Clock-value | "media"
指明活动周期的最小值。属性值是下面两者之一：
Clock-value
指明活动周期最小值的长度，以本地时间为基准。值必须大于0.
"media"
指明活动周期的最小值作为媒体固有周期。它仅对媒体定义的元素有效。（对SVG动画来说，如果被指定为媒体，这个属性将会被忽略。）
"min"的默认值是"0"。这不会对活动周期产生一点约束。除了在本规范中定义的SVG特殊属性，本属性的标准定义在
SMIL Animation 规范中。特别的，请参考：
SMIL Animation: 'min' attribute
max = Clock-value | "media"
max = Clock-value | "media"
指明活动周期的最大值。属性值是下面两者之一：
Clock-value
指明活动周期的最大值作为媒体固有周期。它仅对媒体定义的元素有效。（对SVG动画来说，如果被指定为媒体，这个属性将会被忽略。）
"max"没有默认值，也不会对活动周期产生约束。除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation 规范中。特别的，请参考：
restart
=
"always" | "whenNotActive" | "never"
always
动画可以在任意时刻重新启动，它是默认值。
whenNotActive
动画只有在没有其他动画正在运行时才可以重启。尝试在动画运行的时候重启动画将会被忽略。
never
元素不会为剩余的当前动画周期的父时间容器重启动画。（在SVG的情况下，因为父时间容器是SVG文档片段，那么动画不会为了剩余的文档周期重启）
除了本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation 规范中。特别的，请参考：
SMIL Animation: 'restart' attribute
repeatCount = numeric value | "indefinite" 指明了动画函数的迭代次数，它的取值范围如下： numeric value 这是一个十进制的"floating point"数值，制定了迭代数值。它引入了部分迭代，可以解释为浮点数的小数部分。一个小数值可以解析成为一个周期的一部分。值必须大于0. "indefinite" 动画被定义为无限的重复 除了本规范中明确提到的SVG特殊规范，本属性的标准定义在 SMIL Animation 规范中。特别的，请参考： SMIL Animation: 'repeatCount' attribute
repeatDur = Clock-value | "indefinite"
指明了重复的整个周期长度。它的取值如下：
指明了动画呈现时间中重复调用动画函数的周期
"indefinite"
动画被定义为无限重复（直到文档生命周期结束）
fill
=
"freeze" | "remove"
这个属性取值如下：
freeze
这个动画效果函数被定义用来冻结活动周期的最后的值的效果值。在剩余的文档周期内动画的效果是被冻结的。（除非动画被重启，参考：
SMIL Animation: Restarting animation）
remove
当动画的活动周期结束时，动画的效果是被移除的。当动画结束时，动画再也不能影响目标元素（除非动画被重启，参考：
SMIL Animation: Restarting animation）
这个值是默认值。
SMIL Animation规范定义了关联上面属性的详细处理过程。除了在本规范明确提出的特殊的SVG规范，SMIL动画规范为上面的属性的使用规则给出了标准定义。
9.时钟值
在
SMIL Animation 规范中，时钟值有相同的语法。时钟值语法在这里重复：
Clock-val ::= Full-clock-val | Partial-clock-val
| Timecount-val
Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val ::= Timecount ("." Fraction)? (Metric)?
Metric ::= "h" | "min" | "s" | "ms"
Hours ::= DIGIT+; any positive number
Minutes ::= 2DIGIT; range from 00 to 59
Seconds ::= 2DIGIT; range from 00 to 59
Fraction ::= DIGIT+
Timecount ::= DIGIT+
2DIGIT ::= DIGIT DIGIT
DIGIT ::= [0-9]
对于计时数值，默认的后缀单位是"s"（对秒来说）。在时钟值里面不允许嵌入空格，尽管开始和结尾的空白字符会被忽略掉。时钟值描述了
presentation time。
下面是合法的时钟值例子：
全格式时钟值：
02:30:03
= 2 hours, 30 minutes and 3 seconds
50:00:10.25
= 50 hours, 10 seconds and 250 milliseconds
部分格式时钟值
02:33
= 2 minutes and 33 seconds
00:10.5
= 10.5 seconds = 10 seconds and 500 milliseconds
计时数值
3.2h
= 3.2 hours = 3 hours and 12 minutes
45min
= 45 minutes
30s
= 30 seconds
5ms
= 5 milliseconds
12.467
= 12 seconds and 467 milliseconds
小数值（十进制的）是秒的浮点定义。因此：
00.5s = 500 milliseconds
00:00.005 = 5 milliseconds
10.定义动画值的实时属性
下面的属性是动画值属性。它们通用于
‘animate’,
‘animateColor’,
‘animateMotion’和
‘animateTransform’。这些属性定义的值被实时的分配到指定目标元素的属性上。这些属性在下面提供了控制相关事件的关键帧和离散值之间的插入方法。属性定义：
values = "<list>" 一个用分号分隔的控制动画步调的时间值列表。每次在列表中的值符合在 ‘values’属性列表中值，并且定义了什么时间这个值被使用到动画函数中。每次在 ‘keyTimes’中的值用一 个0-1之间的浮点数来指定，它会重绘一个均衡的补偿到动画元素的周期当中。对于一个被指定带有 ‘values’列表的动画， ‘keyTimes’如果被指定，那么必须像在 ‘values’列表中 的值一样多。对from/to/by动画， ‘keyTimes’如果被指定，就必须有两个值。每个连续的时间值必须比它前面的值大或者相等。 ‘keyTimes’列表的语义取决于写入的模式。 对linear和spline动画，在列表中的第一个时间值必须是0，最后一个时间值必须是1.每一个关联到每一个值的key time在这个值被设置的时候定义。值被写入到key times之间。 对于离散动画，在列表中的第一个时间值必须是0，最后一个时间值必须是1.每一个关联到每一个值的key time在这个值被设置的时候定义。动画函数会使用这个值直到下一个时间值。 如果写入模式是"paced"，那么本属性将会被忽略。如果在 ‘keyTimes’中有任一错误，文档片段会发生错误。如果周期是无限的，所有的 ‘keyTimes’都会无效。 由于对一些值的类型步调动画模式不会指定，对这些类型使用者被推荐使用带有计算过的 ‘keyTimes’"linear"动画模式来取得特殊的写入效果。 除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在 SMIL Animation中。特别的，请参考： SMIL Animation: 'keyTimes' attribute keySplines = "<list>" 一系列与"keyTimes"列表关联的贝塞尔控制点，定义了一个控制区间步调的立体贝塞尔曲线函数。属性值是一个分号分割的控制点列表描述。每一个控制点描述一组四个值：
x1 y1 x2 y2,
描述了对一个时间片段的贝塞尔控制点。注意：SMIL允许值通过空白符或者逗号空白符分隔。"keyTimes"值定义了与与关联片段的贝塞尔"anchor points",并且"keySplines"值是控制点。
因此"keySplines"的控制点必须比"keyTimes"的控制点最少多一个。值的取值范围是[0,1]。这个值除非
‘calcMode’设置为'spline'，否则这个属性将会被忽略。如果在
‘keySplines’
中出现任一错误，文档会发生错误。
from
=
"<value>"
指定了动画的起始值。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation中。特别的，请参考：
SMIL Animation: 'from' attribute
to = "<value>" 指定了动画的结束值。 除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在 SMIL Animation中。特别的，请参考： SMIL Animation: 'to' attribute
SMIL Animation规范与上面这些属性相关的详细处理规则。除了在本规范中明确提到的SVG特殊规范，SMIL动画规范为上面的属性定义了标准的处理规则。在动画元素中指定的动画值对给定的
属性来说必须是合法的。在开始和结尾处的空白以及在分号前后的空白将会被忽略。为给定属性指定的所有值必须是合法的，否则文档会产生错误。如果一个值的列表被使用了，那么动画将会依次
对
from/by/to动画变体的处理规则在带有例外的
Animation function values中有描述。
为了是提供在带有"from"属性的离散动画直观连续的表达并那些潜在的值被使用到这里，这些在SVG中的离散动画偏离了在SMIL中的定义。正如一个离散动画，一个离散动画将在前半周期设置一个
值，并且"to"值到下半个周期。
下面的数据图解了
‘keySplines’属性的写入。每一幅图图解了
‘keySplines’设置对单个区间的影响。横向的坐标轴可以认为是在区间中单元过程写入的输入值，动画的步调将会沿着给定的区间使用这些写入值。纵向坐标轴是单元程序的结果值，取决于
‘keySplines’属性定义的函数。另一种解释是横向坐标轴是对区间的输入单元事件，并且纵向坐标是输出单元事件。同样可参考章节：
为了图解计算数据，考察下面这个简单的例子
<animate dur="4s" values="10; 20" keyTimes="0; 1" calcMode="spline" keySplines={as in table} />
对上面每个例子使用
‘keySplines’值，动画程序写入的近似值如下：
| Value of ‘keySplines’ | Initial value | After 1s | After 2s | After 3s | Final value |
|---|---|---|---|---|---|
| 0 0 1 1 | 10.0 | 12.5 | 15.0 | 17.5 | 20.0 |
| .5 0 .5 1 | 10.0 | 11.0 | 15.0 | 19.0 | 20.0 |
| 0 .75 .25 1 | 10.0 | 18.0 | 19.3 | 19.8 | 20.0 |
| 1 0 .25 .25 | 10.0 | 10.1 | 10.6 | 16.9 | 20.0 |
对一个贝塞尔spline计算的正式定义，参考：[
FOLEY-VANDAM], pp. 488-491.
11.控制动画联合的属性
对一个动画的属性值把动画定义为一个相对值比定义为一个绝对值更加的常用。一个简单的 "grow"动画可以以10像素增加为一个对象的宽度。
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum"/>
</rect>
对重复的动画建立在前一个动画结果的基础上是非常有用的，累加这种影响。下面的例子显示了了矩形在每一次动画重复的时候不断地增长：
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum" accumulate="sum" repeatCount="5"/>
</rect>
在第一次重复的时候，矩形的宽度是30像素。在第二次重复结束的时候，矩形的宽度是40像素。在第五次重复结束的时候，矩形的宽度是70像素。
关于追加动画的更多介绍，参考：
SMIL Animation: Additive animation。关于动画结果累计更多的介绍，参考：
属性定义：
additive
=
"replace | sum"
控制的动画是否可以追加到前面的动画上。促成多个动画的联合运行。
sum
指明了动画将追加到属性的根本值和前面的低权限动画上。
replace
指明了动画将覆盖属性的根本值和前面的低权限动画 。这是默认值，但是表达效果也受动画值属性"by"和"to"影响，就如在
accumulate
=
"none | sum"
控制了动画结果是否可以累计
sum
指明了在第一次迭代后每一次迭代都是 建立在前一次迭代的结果值纸上。
none
指明了重复迭代是不累计的，它是默认值。
这个属性会在目标属性值不支持或者动画元素不重复的情况下被忽略。累积的动画不是为"
to animation"设置的。当动画设置带有
‘to’的时候，本属性将会被忽略。
12.继承
SVG允许属性和元素可以被动画。如果一个给定的属性被子孙继承，那么在父元素（例如一个"g"元素）上的动画将会传播属性动画值到子孙元素作为动画增益的作用；因此子孙元素可以继承从祖先上继承可动画的属性和值。
13."animate"元素
‘animate’元素被用作实时动画单一的属性。例如，让一个矩形在5秒内淡出，你可以指示：
<rect>
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
-
Categories:
- Animation element Content model:
- Any number of the following elements, in any order: Attributes:
- DOM Interfaces:
14."set"元素
‘set’元素表达了一个简单的含义是对一个指定的周期仅仅设置一个属性的值。它支持所有的属性类型，包括那些不能合理写入的字符串和布尔值等等。
‘set’元素是不可以追加动画的。追加和累计对
‘set’元素是不允许的，即便是设置了也会被忽略。
-
Categories:
- Animation element Content model:
- Any number of the following elements, in any order: Attributes:
- DOM Interfaces:
属性定义
to
= "
<value>"
在
‘set’元素的周期中指定了属性的值。参数值必须匹配属性类型。对于可以使用
‘set’元素动画的一个属性列表，可以查看：
Elements attributes and properties that can be animated
15."animateMotion"元素
‘animateMotion’元素会使被引用元素沿着一个动作路径运动。
-
Categories:
- Animation element Content model:
- Any number of descriptive elements and at most one ‘mpath’ element, in any order. Attributes:
- DOM Interfaces:
属性定义：
calcMode
=
"discrete | linear | paced | spline"
指明了动画的写入方式。引用了前面的
‘calcMode’属性的描述。唯一的不同点是默认值是"paced"。参考：
SMIL Animation: 'calcMode' attribute for 'animateMotion'
path
= "
<path-data>"
运动路径， 在相同的格式化和解释下被解读为"path"元素的"d"属性。一个动画的动画路径的效果是为引用元素在CTM中添加一个必要的移动矩阵，这会通过实时计算X,Y的值
使引用元素沿着当前用户坐标系的X,Y轴移动。
keyPoints
= "
<list-of-numbers>"
distance along the path算法。每一个在列表中的值必在
‘keyTimes’列表中有相对应的值。如果一个"keyPoints"属性的值被指定，那么必须有一个
‘keyTimes’列表与之
对应。如果这个属性有错误，那么文档会出错。
rotate = "<number> | auto | auto-reverse"
auto
表明了元素实时的自动通过与动画路径方向一个角度旋转。
auto-reverse
表明了元素实时的自动沿着动画路径反向旋转。
表明了目标元素有一个常量的角度旋转应用到它，这个角度用数字指示度数。默认值是"0".
origin
= "
default"
这个属性是
defined in the SMIL Animation specification。在SVG中它没有作用。
-
Categories:
- None Content model:
- Any number of the following elements, in any order: Attributes:
- DOM Interfaces:
属性定义：
xlink:href
= "
<iri>"
一个到定义了定义了动画路径的
‘path’元素的
IRI reference。不可动画的。
对
‘animateMotion’，对
‘from’,
‘by’,
‘to’
和
‘values’ 指定的值，含有多个x，y坐标值对，x坐标与y坐标用空白符或者单个逗号分隔。例如：from="33,15"
表示了x坐标值是33，y坐标值是15。如果"values"被提供了，那么
‘values’属性必须含有一个x,y坐标值对列表。坐标值最少用一个空白字符或者一个逗号进行分隔。在
分隔符两侧额外的空白符是可以允许的。例如：
values="10,20;30,20;30,40"
或者
values="10mm,20mm;30mm,20mm;30mm,40mm"。每一个坐标都表示一个长度。
两种可靠的可选的允许定义使用任意SVG的
path data指令定义一个动画路径方法：
图形的各种各样的(x,y)点为引用元素提供一个移动矩阵到CTM上，引用元素通过实时的计算图形上的(x,y)值在当前坐标系统上沿着x,y轴移动。因此，引用元素通过
关联与原始当前用户坐标系统的动画路径偏移量实时的移动。追加的移动被应用到由目标元素的
‘transform’属性导致的任意移动或者由目标元素的
‘animateTransform’
‘animateMotion’的默认计算模式（
‘calcMode’）是"paced"。它将沿着指定路径产生匀速的动画。注意此刻animateMotion元素可以追加，观察两个或者多个
"paced" (匀速)动画可能在一个联合的匀速动画可能没有结果是非常重要的。当一个path混杂有"discrete", "linear" 或者"spline"的
‘calcMode’设置，并且如果没有提供
‘keyPoints’没有提供值，值的数量被定义为path定义的点数量，除非path之中有多个"move to"指令。在路径当中一个"move to"指令当作为一个分隔点划分周期或者与
‘keyTimes’, ‘keySplines’ 和‘keyPoints’ 值相关，这个"move to"指令是不被计数的。当一个路径与一个"paced"
‘calcMode’设置结合时，所有的"move to"指令
出的点通过寻找沿着动作路径使用用户代理的
distance along the path算法的
t/dur 距离的点来确定。下面的例子展示了在动作路径动画中被计算出的移动矩阵。
示例：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<desc>Example animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
效果图像：
下面的表格展示了为取得这样动作路径动画被应用的移动矩阵：
|
|
After 0s
|
After 3s
|
After 6s
|
|
Supplemental transform due to movement along motion path
|
translate(100,250)
|
translate(250,100)
|
translate(400,250)
|
|
Supplemental transform due to
rotate="auto"
|
rotate(-90)
|
rotate(0)
|
rotate(90)
|
对一个可以使用
‘animateMotion’元素附加动画的元素列表，可以参考：
Elements, attributes and properties that can be animated
16."animateColor"元素
这个元素使用已经被废弃了，因为可以使用
‘animate’来替代它
17."animateTransform"元素
‘animateTransform’元素向目标元素上动画了一个移动属性，由此允许动态的控制平移，缩放，旋转，斜交。
-
Categories:
- Animation element Content model:
- Any number of the following elements, in any order: Attributes:
- DOM Interfaces:
属性定义：
type
= "
translate | scale | rotate | skewX | skewY"
指明了移动的类型并且根据这个类型的值实时的变动。如果这个属性没有指定，那么默认的效果是和'translate'一样的。
对
type="translate"的，每一个属性赋值的可以用<tx>或者<tx>,<ty>
对type="scale"的，每一个属性值赋值可以用<sx>或者<sx>,<sy>
对type="rotate"的,每一个属性值赋值可以用<rotate-angle>或者<rotate-angle> <cx> <cy>
对
type="skewX"和
type="skewY"的，每一个属性值赋值可以用<skew-angle>
SVG除使用本身的动画元素操作动画外，还可以使用javascript操作DOM方式的方法来进行动画。
指明活动周期最大值的长度，以本地时间为基准。值必须大于0. "media"
扫一扫
2471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
