本节我们学习 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