码迷,mamicode.com
首页 > 其他好文 > 详细

SVG简单动画

时间:2015-01-30 17:47:59      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:svg   动画   

一:先来看效果

技术分享

二:svg实现



三:代码说明

(1)animateTransform 元素是我们要为其制作动画的对象(即 rect)的子对象,它将执行所有费力的工作


(2)因为方块的中心与视区的原点重合(坐标为 (400, 400)),所以方块将绕其中心旋转360 度

 from="0" to="360"表示旋转的角度。 dur="5s" 表示旋转的时间。


(3)  <line x1="-400" y1="0" x2="400" y2="0" style="stroke: black;" />  X轴线
    
      <line x1="0" y1="-400" x2="0" y2="400" style="stroke: black;" />    Y轴线

SVG简单动画

标签:svg   动画   

原文地址:http://blog.csdn.net/u013628152/article/details/43308303

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!