【H5】 svg旋转

• attributeName = 要变化的元素属性名称 可以是元素直接暴露的属性，如 x , y
  可以是CSS属性

• begin 动画开始时间，可为具体的时间值，也可以是其他条件触发 animate参数详解

• attributeName = 要变化的元素属性名称

   a、可以是元素直接暴露的属性，如 x , y
   b、可以是CSS属性 
  

• from, to, by, values

    from 动画的起始值(若果与元素的默认值一样可省略此值) 
    to 动画的结束值
     by 动画结束值(相对变化的值)
      values用分号分隔的一个或多个值，可以看成是动画的多个关键值点。 
  

• begin 动画开始时间，可为具体的时间值，也可以是其他条件触发

      offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-markervalue | wallclock-sync-value | "indefinite" 
  

• dur 动画过渡的时间 ，“具体时间”/indefinite(无限时间即无具体意义)

• repeatCount, repeatDur

     repeatCount表示动画执行次数，可以是合法数值或者”indefinite“ 
     repeatDur 定义重复动画的总时间。可以是普通时间值或者indefinite
  

字体旋转动画：

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
   <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
      <text x="250" y="250" font-size="40">
        旋转
        <!-- transform动画  type类型旋转  begin=3s后运动开始  dur运动一次的时间  indefinite：无限循环-->
        <animateTransform attributeName="transform" type="rotate"
        begin="3s" dur="3s" from="0 250 250" to="360 250 250"
        repeatCount="indefinite" />
      </text>
    </svg>
</div>

字体平移动画：

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
   <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
			<text x="250" y="250" font-size="40">
	          平移
	          <!-- attributeName沿着x轴方向平移 开始时间3s后  values平移从250开始至0至250至400至250-->
	          <animate attributeName="x" begin="3s"  values="250;0;250;400;250" dur="3s"
	          repeatCount="indefinite" />
	          <!-- indefinite无限循环 -->
	      </text>
	 </svg>
</div>