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 |
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()； // 重启动
来源：oschina
链接：https://my.oschina.net/u/4318064/blog/4217062