本节我们学习 SVG 中路径，在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大，既可以创建基本的图形，也可以创建更复杂的形状。<path> 路径是由一些命令来控制的，每个命令对应一个字母，字母区分大小写。SVG中的path命令<path> 元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。<path> 元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位：
本节我们学习 SVG 中路径，在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大，既可以创建基本的图形，也可以创建更复杂的形状。<path> 路径是由一些命令来控制的，每个命令对应一个字母，字母区分大小写。
SVG中的path命令
<path> 元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。
<path> 元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位：
| 命令 | 参数 | 描述 |
|---|---|---|
| M | x y | 移动画笔到给定坐标，即起始点 |
| L | x y | 绘制一条到给定坐标的线，可提供多组坐标绘制折线 |
| H | x y | 绘制一条到 x 坐标的横线 |
| V | y | 绘制一条到 y 坐标的竖线 |
| C | x yx1 y1 x2 y2 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点 |
| S | x y x1 y1 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点 |
| Q | x y x1 y1 | 绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线 |
| T | x y | 绘制一条从当前点到（x,y）的二次贝塞尔曲线 |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 x-axis-rotation 度。large-arc-flag 等于0表示弧线小于180度，等于1表示弧线大于180度。sweep-flag 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装 |
| Z | 闭合路径 |
示例：
例如我们使用路径命令绘制一个矩形：
<!DOCTYPE html>
<html>
<head>
<meta 
最低0.47元/天 解锁文章
1329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
