svg动画

class

​直接为svg元素添加class，在class中描述CSS3动画，svg元素属性都可以写在class里
例如

@keyframes action
{
 from {
  stroke-width: 5;
  r: 15;
 }
 to {
  stroke-width: 10;
  r: 10
 }
}

animate

例如

<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
</circle>

1 attributeName

需要动画的属性名称

 

2 from

属性的初始值

 

3 to

终止值

4 dur

动画的时间

5 repeatCount

动画播放的次数
indefinite 只要SVG图片存在的话，动画永久循环
​​​​​​

6 values

相当于from to 的结合，可写出多个/组状态值 用分号 ; 隔开

<animate attributeName="opacity" values="0;1;0;1;0;1;0;1" begin="1s" dur="1s" repeatCount="1"/>

7 begin

动画开始的时间

animateTransform

animateTransform元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切
例如

<polygon points="60,30 90,90 30,90">
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
</polygon>

animateMotion

animateMotion元素导致引用的元素沿着运动路径移动。
例如

<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>

path 也属性值同svg path，可做任意曲线