SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。 从语法上看CSS代码是样式代码，而SVG动画，是SVG中的一些动画标签。 SVG 动画元素介绍 svg可以设置动画的元素有5个，分别为 <set> <animate> <animateColor> <animateTransform> <animateMotion> 接下来我们具体来看看每一个元素的作用 set set用于设置属性值，可以用于实现延迟设置功能，也就是可以在特定时间之后修改某个属性值。 [代码]<svg height="400" width="400"> <rect width="90" height="90" fill="yellow" > <set attributeName="x" attributeType="XML" to="60" begin="3s" /> </rect> </svg> [代码] 这里的attributeName是定义要设置的属性，attributeType是定义要设置属性的类型，to为定义的值，begin为延迟时间。后面会详细讲解。 animate 实现基础动画，跟css3中的animation类似。 [代码]<svg height="400" width="400"> <rect width="90" height="90" fill="yellow" > <animate attributeName="x" from="160" to="60" begin="0s" dur="3s"/> </rect> </svg> [代码] animateColor 用于设置颜色的动画，不过颜色动画使用animate也可以实现，所以这个属性已经被废弃。 animateTransform 用于实现样式过渡动画，类似于css3中的transition属性 [代码]<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <rect width="90" height="90" fill="yellow" > <animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" from="1" to="90" repeatCount="indefinite"/> </rect> </svg> [代码] animateMotion animateMotion 元素可以用于定义SVG路径动画。如下例子(例子中的path与动画无关，只是用于标示) [代码]<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="20" height="20" fill="red" > <animateMotion path="M0,0 Q50,60 80,140 T340,100" begin="0s" dur="20s" repeatCount="indefinite"/> </rect> <path xmlns="http://www.w3.org/2000/svg" d="M0,0 Q50,60 80,140 T340,100" id="svg_13" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> </svg> [代码] 效果如下 [图片] 不过这个矩形不管运动到哪都是水平的，我们可以设置成文本照着path的方向做旋转 [代码]<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="20" height="20" fill="red" > <animateMotion path="M0,0 Q50,60 80,140 T340,100" begin="0s" dur="20s" rotate="auto" repeatCount="indefinite"/> </rect> <path xmlns="http://www.w3.org/2000/svg" d="M0,0 Q50,60 80,140 T340,100" id="svg_13" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> </svg> [代码] [图片] 自由组合 自由组合也就是设置多个样式的动画，比方说同时设置位置和透明度的变化。只需设置多个animate即可 [代码]<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <rect width="90" height="90" fill="yellow" > <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" /> </rect> </svg> [代码] [图片] SVG 动画标签参数详解 前面章节中，我们了解了SVG具有四种主要的动画标签<set>,<animate>,<animateTranform>,<animateMotion>。 这一章主要讲其中参数的作用。 1、attributeName = <attributeName> 要变化的元素属性名称，可以是SVG标签上的属性，如font-size，width，height等，也可以是CSS属性，如opacity这些。这个属性跟下面的attributeType 一起使用。 2、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，因此在设置的时候就需要标明一些属性的类别。 3、from，to，by，values 上面4个属性是一个系列的，用于表示动画执行过程的状态 from = “value” 动画的起始值。 to = “value” 指定动画的结束值。 by = “value” 动画的相对变化值。 values = “list” 用分号分隔的一个或多个值，可以看出是动画的多个关键值点。 from, to, by, values相互之间存在有一些制约关系。需要满足以下一些规则： 如果动画的起始值与元素的默认值是一样的，from参数可以省略。 to,by两个参数至少需要有一个出现（不考虑values）。否则动画效果没有。to表示绝对值，by表示相对值。 如果to,by同时出现，则by打酱油，只识别to。 values可以设置多个动画节点，不同于to/by只能设置单个动画节点，当values值有效设置了之后，from, to, by 的值都会被忽略。 [代码]<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="150" x="160">马 <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" /> </text> </svg> [代码] 总结一下，可以设置的动画组合为from-to动画、from-by动画、to动画、by动画以及values动画。 4. begin, end begin是指动画开始的时间。跟CSS3中的-delta有点像，但begin具备的功能比-delta多很多。 begin可以设置的值： [代码]1、具体时间值 'h' | 'min' | 's' | 'ms'这些，默认单位是's' 2、偏移值，'+/-'，应该指相对于，某个操作的值，如begin="x.end-1s"， 3、基于另一个动画的值，如某一个动画执行完成后开始执行，如begin="x.end" 4、与事件关联的值，如点击时开始执行动画begin="circle.click" 5、与某个动画执行次数相关的，比如某个元素执行2次后开始执行begin="x.repeat(2)" 6、与键盘事件相关的，比如按下某个键开始执行 begin="accessKey(s)" [代码] [代码]<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="160" x="160">马 <animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" /> </text> </svg> [代码] end 个属性跟begin相对，属性值的有效类型一样。 5. dur 动画执行的时长，可以设置的值为常规的时间值或者 ‘indefinite’。设置’indefinite’跟没有设置动画是一个意思。 6. calcMode, keyTimes, keySplines 用于设置动画执行的节奏和各个阶段执行的快慢，类似于CSS3中的-timing-function。 1、calcMode 用于定义动画执行的节奏，也就是在规定时间内是如何完成这一整套动画的。calcMode属性支持4个值分别为：discrete,linear,paced,spline。 discrete：不连续的运动，就是从一个状态直接跳到另一个状态下，如从from状态直接跳到to状态 linear：线性运动，animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的。每个动画阶段的执行时间都是一致。 paced ：线性运动，动画从头到尾执行速度都是一样，如果设置了paced，keyTimes无效。 spline ： 属于可以自定义执行速度，类似于-timing-function: cubic-bezier()这一CSS属性。我们可以通过keyTimes和keySplines属性来定义各个动画的执行效果。 [代码]<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="discrete" values="10;30;150" dur="4s"/> </rect> <rect x="10" y="60" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="linear" values="10;30;150" dur="4s" /> </rect> <rect x="10" y="110" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="paced" values="10;30;150" dur="4s"/> </rect> <rect x="10" y="160" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;30;150" keyTimes="0; .8; 1" dur="4s" /> </rect> </svg> [代码] 2、keyTimes keyTimes用于限定各个阶段的执行时间，是一串0-1的浮点数字组，每个数值的有效取值范围为0-1，代表每一个动画阶段必须在那个时间点执行完成。 keyTimes的数字组长度要和values长度一直，如果是to/by动画就只有两个值。否则会当做无效处理。 [代码]<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .8; 1" dur="4s"/> </rect> <rect x="10" y="60" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .2; 1" dur="4s"/> </rect> </svg> [代码] 3、keySplines 当calcMode的值为spline时才有效，对应的值为一组三次贝塞尔曲线的控制点，默认为(0,0,1,1)。这个值完全类似于-timing-function: cubic-bezier()的这个CSS属性值。keySplines可以设置多组，每一组用";"隔开。 每一组代表在这个动画阶段中执行的速率 [代码]<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="50" height="50" fill="blue"> <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .8; 1" keySplines="0.42 0 1 1;0 0 0.59 1;0.42 0 1 1;" dur="4s"/> </rect> </svg> [代码] 7. repeatCount, repeatDur repeatCount表示动画执行次数，可以是合法数值或者"indefinite"。 repeatDur定义重复动画的总时间。可以是普通时间值或者"indefinite"。 8. fill fill表示动画间隙的填充方式。支持参数有：freeze | remove。 remove ：是默认值，表示动画结束直接回到开始的地方。 freeze ：表示动画结束后元素固定在结束的位置。 9. accumulate, additive accumulate是累积的意思。支持参数有：none | sum. 默认值是none。如果值是sum表示动画结束时候的位置作为下次动画的起始位置。 additive控制动画是否附加。支持参数有：replace | sum. 默认值是replace。如果值是sum表示动画的基础知识会附加到其他低优先级的动画上， [代码]<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="50" height="50" fill="blue"> <animateTransform attributeName="transform" type="scale" from="1" to="3" dur="10s" repeatCount="indefinite" additive="sum"/> <animateTransform attributeName="transform" type="rotate" from="0 30 20" to="360 30 20" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>; </rect> </svg> [代码] 这里，两个动画同时都是transform，都要使用一个type属性，好在这个例子additive="sum"是累加的而不是replace替换。于是，我们就可以是实现一边旋转一边放大的效果 10. restart 用于设置动画是否可以重复执行。可设置的值为’always | whenNotActive | never’。 always是默认值，表示总是，也就是没触发一次动画执行一次。 whenNotActive：表示动画正在进行的时候，是不能重启动画的。 never：表示动画不能被重新触发。 11. min, max 表示动画执行的最短和最长时间。 动画暂停裕播放 SVG 提供一些js接口可以用于控制动画 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations(); 参考文章 超级强大的SVG SMIL animation动画详解