2022/7/16-SVG动画

SVG中提供三种常用动画标记

• 基础动画
• 形变动画
• 路径动画

• 圆：        circle        cx,cy:坐标    r:半径

• 椭圆        ellipse      cx,cy:坐标    rx,ry:半径

• 直线        line      x1,y1:起点    x2,y2:终点   stroke:颜色

• 折线        polyline points="x1,y1,x2,y2,x3,y3 "

• 闭合多边形        polygon

• ​​​​​​​fill        颜色

​​​​​​​

SVG动画属性

• attributeType: CSS/XML规定的属性值的名称空间

• attributeName:规定元素的哪个属性会产生动画效果

• animateTransform    设置转换属性的动画，从而允许动画控制平移，缩放，旋转和/或倾斜

• from/to: 从哪到哪

• points  坐标值

• rotate  旋转参数

• stroke 线的颜色

• stroke-width 线宽

• dur:动画时长

• fill:动画结束之后的状态，保持freeze结束状态/remove回复初始状态

• repeatCount 动画执行次数:6|indefinite,可以是一个正常次数，也可以是无限循环​​​​​​​​​​​​​​

  半径5到100变化

                   半径变大                                            变色

或者点击开始运行

          点击半径变大变色

旋转

​​​​​​​ 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！