| 符号 | 参数 | 意义 |
|---|---|---|
| M | moveTo(x,y) | 移动到坐标 |
| m | moveBy(offsetX,offsetY) | 移动了坐标 |
| z / Z | lineTo(beginX,beginY) 封闭绘制 | |
| L | lineTo(x,y) | 绘制直线 |
| l | lineBy(offsetX,offsetY) | 绘制直线 |
| H | lineTo(x, y0) | 水平线（只有一个参数） |
| h | lineBy(offsetX, y0) | 水平线（只有一个参数） |
| V | lineTo(x0, y) | 竖直线（只有一个参数） |
| v | lineBy(x0, offsetY) | 竖直线（只有一个参数） |
| C | curveTo(x1,y1,x2,y2,x,y) | 绘制曲线 |
| c | curveBy(offsetX1,offsetY1, offsetX2, offsetY2, offsetX, offsetY) | 绘制曲线 |
| S | curveTo(x2,y2,x,y) | 平滑曲线 （比直接绘制曲线少一个参数） |
| s | curveBy(offsetX2, offsetY2, offsetX, offsetY) | 平滑曲线（比直接绘制曲线少一个参数） |
| Q/q | quadratic Bézier curveto(x1,y1,x,y) | 贝塞尔曲线 |
| T/t | Shorthand/smooth quadratic Bézier curveto(x,y) | 平滑贝塞尔曲线 |
| A/a | elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 椭圆弧 |
练一练
曲线
https://www.w3.org/TR/SVG/images/paths/cubic02.svg
贝塞尔
https://www.w3.org/TR/SVG/images/paths/quad01.svg
网友评论