svg path路径绘制：贝塞尔曲线

二次贝塞尔曲线：

三次贝塞尔曲线：

基本参数：

指令字母（绝对坐标）

中文含义

参数示意

具体说明

M

移动到(moveTo)

x,y

路径起始点坐标

Z

闭合路径(closepath)

 

将路径的开始和结束点用直线连接

L

直线(lineTo)

x,y

当前节点到指定(x,y)节点，直线连接

H

水平直线

x

保持当前点的y坐标不变，x轴移动到x, 形成水平线

V

垂直直线

y

保持当前点的x坐标不变，y轴移动到y, 形成垂直线

   

命令

名称

参数

M

moveto 移动到

(x y)+

Z

closepath 关闭路径

(none)

L

lineto 画线到

(x y)+

H

horizontal lineto 水平线到

x+

V

vertical lineto 垂直线到

y+

C

curveto 三次贝塞尔曲线到

(x1 y1 x2 y2 x y)+

S

smooth curveto 光滑三次贝塞尔曲线到

(x2 y2 x y)+

Q

quadratic Bézier curveto 二次贝塞尔曲线到

(x1 y1 x y)+

T

smooth quadratic Bézier curveto 光滑二次贝塞尔曲线到

(x y)+

A

elliptical arc 椭圆弧

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

R

Catmull-Rom curveto* Catmull-Rom曲线

x1 y1 (x y)+

  

 svg动画属性详解

 <set>    - 设置svg元素动画属性

<animate>    - 定义svg元素基础动画效果。实现单属性的动画过渡效果，移动、变形、变色等。类似Snap.svg的animate()方法支持的动画效果。

<animateTransform>    - 定义svg元素动画3D效果，旋转、放大等，类似css3的transform。

<animateMotion>    - 定义svg元素运动路径。

 

<svg>

...

<path d="" opacity="1">

<set attributeName="d" to="" begin="1s" />

<animate attributeName="d" from="" to="" begin="1s" dur="3s" repeatCount="indefinite" />

<animateTransform />

<animateMotion />

</path>

...

</svg>

  

动画属性：

attributeName = "name" //要变化的元素属性名称name

attributeType = "CSS | XML | auto" //要变化元素属性的类型，可省略

type                     //scale、transform

from                    //动画开始状态，可省略

to                        //动画到达状态值 - 绝对状态

by                       //动画到达状态值 - 相对状态

values                //动画多个到达状态值 - "value1;value2…"字符串list

dur                     //一次动画持续时间，dur="8s"，dur="indefinite"

repeatCount      //动画执行重复次数，n | indefinite

repeatDur          //定义动画重复的总时间，n | indefinite 与dur有区别

begin                 //动画开始标志，begin = value | offset-value | syncbase-value | event-value | repeat-value |

   // accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

   //begin可以设置多个时间值，"0s;5s;8s",单位可以为ms/s/m/h等，缺省单位为s

   //offset-value：表示偏移值，数值前面有+或-。应该指相对于document的begin值而言。

   //syncbase-value：基于同步确定的值。语法为：[a元素的id].begin/end +/- 时间值。

借用其他元素的begin值再加减，这个可以准确实现多个独立元素的动画级联效果。

   //event-value：某事件触发，如begin="btn.click"，begin="mouseover"，某按钮点击后开始

   //repeat-value：某元素重复n次后执行开始，如begin="a.repeat(3)"，在元素a执行3次后开始

   //accessKey-value：某快捷键触发按下，如begin="accessKey(s)"，按下键盘s键开始，火狐支持

   //media-marker-value：某媒体元素状态触发？？

   //wallclock-sync-value：到达某时钟开始，如：1997-07-16T19:20:30.45+01:00

   //"indefinite"：无限循环

end                   //结束时间标志，如设置过小，会导致动画提前结束，可省略

fill                     //动画间隙的状态：freeze | remove，freeze保持至结束状态，remove移除并恢复至初始状态，默认remove

calcMode         //控制动画速度变化，calcMode="discrete | linear | paced | spline"；

 //discrete-from值直接跳到to值；

 //linear-匀速，默认值；

 //paced-通过插值让动画的变化步调平稳均匀，仅支持线性数值区域内的值，keyTimes或keySplines值都会不生效；

 //spline-插值定义贝塞尔曲线。spline点的定义在keyTimes属性中，每个时间间隔控制点由keySplines定义。

keyTimes          //“value1;value2…”跟上面提到的<list>类似，都是分号分隔一组时间值。

keyTimes值的数目要和values一致，如果是from/to/by动画，keyTimes就必须有两个值。然后对于linear和spline动画，第一个数字要是0, 最后一个是1。

每个连续的时间值必须比它前面的值大或者相等。

keySplines        //keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。

//每个控制点使用4个浮点值表示：x1 y1 x2 y2.

//只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。

accumulate       //动画是否累积。accumulate="none | sum"。默认none，sum表示动画结束位置作为下次动画起始

additive             //动画是否附加。additive="replace | sum"。默认replace，sum表示元素的动画基础定义会附加到其他低优先级的动画元素

restart              //重启动画执行次数，restart="always | whenNotActive | never"，默认always，

 //always随时可重启一次，never不可重启，whenNotActive动画不活动时重启

min/max           //表示动画执行最短和最长时间。支持参数为时间值和"media"（媒介元素有效）, max还支持indefinite

 

animateTransform  type:translate | scale | rotate | skewX | skewY

animateMotion  <mpath xlink:href="#path1" />

  

动画暂停与播放

SVG animation中有内置的API，js控制： svg1.pauseAnimations(); // 暂停 svg1.unpauseAnimations()； // 重启动