SVG(Scalable Vector Graphics)是使用XML描述的2D矢量图形,它可以在不失真的情况下放大或缩小。SVG具有丰富的绘图元素,其中最基本的是path
元素,它可以绘制任意复杂的形状。了解SVG Path的基本语法和参数是绘制以及处理SVG图像的必要技能。本文将介绍SVG Path的参数,让你轻松掌握路径绘制技巧。
一、基本语法
SVG Path的基本语法非常简单,它由一个或多个绘图命令组成,命令和参数之间使用空格或逗号分隔。绘制命令可以写在path
元素的d
属性中,如下所示:
<svg width="100" height="100">
<path d="M 10 10 L 90 90 L 10 90 Z" stroke="black" fill="transparent"/>
</svg>
这段代码绘制了一个三角形,它由三条线段组成。M
命令表示将画笔移动到指定的坐标点,L
命令表示从当前坐标点画线到指定的坐标点,Z
命令表示连接起点和终点形成封闭形状。在这个例子中,画笔移动到(10, 10),然后画一条直线到(90, 90),再画一条直线到(10, 90),最后通过Z
命令将三角形封闭。
下面是一些常用的绘图命令:
M x y
:将画笔移动到指定的坐标点L x y
:从当前坐标点画线到指定的坐标点H x
:从当前坐标点水平画线到指定的x坐标V y
:从当前坐标点垂直画线到指定的y坐标Z
:连接起点和终点形成封闭形状C x1 y1, x2 y2, x y
或者c dx1 dy1, dx2 dy2, dx dy
:三次贝塞尔曲线Q x1 y1, x y
或者q dx1 dy1, dx dy
:二次贝塞尔曲线A rx ry x-axis-rotation large-arc-flag sweep-flag x y
或者a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
:椭圆弧形状
二、命令参数详解
除了上面介绍的绘图命令,每个命令还可以带有不同类型的参数,下面分别介绍它们的含义。
1、坐标点参数
M
、L
、H
、V
、T
和S
命令需要带有一或多个坐标点参数,每个坐标点参数包含x
和y
两个数值,用逗号或空格分隔。坐标点参数可以是绝对坐标,也可以是相对坐标,相对坐标使用小写字母表示,绝对坐标使用大写字母表示。
1.1 绝对坐标
绝对坐标是相对于SVG画布左上角的绝对坐标点,例如:
<path d="M 100 100 L 200 100" />
在这个例子中,M
命令的参数是(100, 100),表示将画笔移动到画布上的坐标点(100, 100),L
命令的参数是(200, 100),表示从当前坐标点画一条直线到(200, 100)。
1.2 相对坐标
相对坐标是相对于前一个坐标点的相对坐标点,例如:
<path d="M 100 100 l 100 0" />
在这个例子中,M
命令的参数是(100, 100),表示将画笔移动到画布上的坐标点(100, 100),l
命令的参数是(100, 0),表示在当前坐标点的基础上,向右画一条长度为100的线段。
2、贝塞尔曲线参数
贝塞尔曲线用于绘制平滑曲线,可以使用C
、Q
和S
命令绘制三次和二次贝塞尔曲线,其中C
和Q
命令需要三个参数,S
命令需要两个参数。
2.1 三次贝塞尔曲线
三次贝塞尔曲线使用C
命令绘制,它需要三个坐标点参数,依次表示控制点1、控制点2和结束点。控制点用于控制曲线的形状和方向,结束点用于指定曲线的终点坐标。
<path d="M 100 100 C 150 50, 200 50, 250 100" />
这个例子绘制了一个三次贝塞尔曲线,起点坐标是(100, 100),控制点1坐标是(150, 50),控制点2坐标是(200, 50),结束点坐标是(250, 100)。
2.2 二次贝塞尔曲线
二次贝塞尔曲线使用Q
命令绘制,它需要两个坐标点参数,依次表示控制点和结束点。控制点用于控制曲线的形状和方向,结束点用于指定曲线的终点坐标。
<path d="M 100 100 Q 200 50, 250 100" />
这个例子绘制了一个二次贝塞尔曲线,起点坐标是(100, 100),控制点坐标是(200, 50),结束点坐标是(250, 100)。
2.3 简写命令
使用S
命令可以绘制平滑的贝塞尔曲线,它需要两个坐标点参数,依次表示控制点和结束点。S
命令与前面的命令有所不同的是,它没有指定第一个控制点,而是通过前面一个曲线的结束点作为第一个控制点。
<path d="M 100 100 C 150 50, 200 50, 250 100 S 300 150, 350 100" />
这个例子中,前面绘制了一个三次贝塞尔曲线,结束点是(250, 100),这个曲线的结束点也是下一个S
命令的第一个控制点。这个例子相当于绘制两个三次贝塞尔曲线。
3、椭圆弧参数
使用A
命令可以绘制椭圆弧线,它共需要七个参数,依次表示椭圆宽度rx
、椭圆高度ry
、x轴旋转角度x-axis-rotation
、弧线标记large-arc-flag
、sweep-flag
、结束点坐标。其中前五个参数都是数值,large-arc-flag
和sweep-flag
都是布尔类型。
3.1 椭圆弧参数解析
椭圆弧参数比较难以理解,下面详细解释每个参数的含义。
rx
:椭圆宽度的一半ry
:椭圆高度的一半x-axis-rotation
:绕x轴旋转的角度,单位是度large-arc-flag
:表示是否画大弧线,0表示小角度的弧线,1表示大角度的弧线sweep-flag
:表示是顺时针方向还是逆时针方向,0表示逆时针方向,1表示顺时针方向x y
:结束点的坐标
3.2 椭圆弧绘制
使用A
命令绘制椭圆弧线需要指定起点和结束点,因此可以先使用M
和L
命令绘制一条直线,再用A
命令绘制椭圆弧线。
<path d="M 100 50 L 200 50 A 50 30 0 0 1 200 150" />
这个例子绘制了一个椭圆弧,起点坐标是(100, 50),终点坐标是(200, 150),rx=50
,ry=30
,x-axis-rotation=0
,large-arc-flag=0
,sweep-flag=1
。
三、小结
SVG Path是绘制和处理SVG图像的基础,了解Path的语法和参数可以帮助你更好地掌握SVG的绘图技巧。本文介绍了Path的基本语法和常用命令,以及各个命令的参数类型和细节,希望可以对你有所帮助。