远走高飞

暗黑模式

自定义形状(Custom Shapes) ​

前端教程SVG

本节我们讲解 3 种自定义图形：

  1. <path> 可以绘制任意的形状和曲线；
  2. <polyline> 绘制折线；
  3. <polygon> 绘制多边形。

路径（<path>） ​

<path> 是 SVG 中最常使用的元素，因为它可以绘制任意你想要的形状。

基本语法 ​

html
<svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <path d="{{directions}}" pathLength="{{lengthOfPath}}" fill="orange" stroke="black" stroke-width="3" />
</svg>

语法说明：

  • d：表示一系列的绘图指令（directions），例如移动坐标、绘制直线、绘制曲线等共 20 个；
  • pathLength：手动设置 path 的长度，此属性我们在后面章节讲解 stroke 时会说明的；
  • stroke：表示路径线条的颜色；
  • stroke-width：表示路径线条的宽度；
  • fill：表示路径封闭区域的背景填充色。

M 和 L 指令 ​

M 表示 MoveTo 指令，是指把画笔移动到某个坐标；

L 表示 LineTo 指令，是指从画笔当前的坐标绘制直线到某个坐标。

基本语法
html
<svg>
  <path d="
  M x,y
  L a,b
  ......" />
</svg>
  • M x,y：表示把画笔移动到坐标 (x,y)
  • L a,b：表示从画笔的当前的坐标（也就是刚才的 (x,y)）画直线到 (a,b)

TIP

画笔的当前坐标默认为 (0,0)。

示例：
d="M 3,10 L 10,0 L 17,10 L 10,20 L 3,10" 解释：
  1. M 3,10：把画笔移动到坐标 (3,10)，此坐标变为当前坐标；
  2. L 10,0：从当前坐标画直线至坐标 (10,0)，并将此坐标设为当前坐标；
  3. L 17,10：原理同上，画直线至坐标 (17,10)；
  4. L 10,20：原理同上，画直线至坐标 (10,20)；
  5. L 3,10：原理同上，画直线至起始 (3,10)。

TIP

以上的代码是可以编辑的哦，你可以尝试输入不同的值，来感受一下~~

m 和 l 指令 ​

上面的 M L 指令使用的是绝对坐标，而 m l 指令使用的是相对坐标，除此以外其他都是相同的。

基本语法：
html
<svg>
  <path d="
  m x,y
  l a,b
  ......" />
</svg>

语法说明：

  • m x,y：表示把画笔坐标偏移 (x,y)；
  • l a,b：表示从当前坐标画直线到新的坐标（当前坐标偏移 (a,b)），并将新坐标设为当前坐标。
示例：
d="m 3,10 l 7,-10 l 7,10 l -7,10 l -7,-10" 解释：
  1. m 3,10：把画笔坐标偏移 (3,10)，即往右移动3、往下移动10，偏移后的坐标变为当前坐标；
  2. l 7,-10：从当前坐标画直线到新的坐标（当前坐标偏移 (7,-10)，即往右移动7、往上移动10），并将新坐标设为当前坐标；
  3. l 7,10：原理同上，偏移 (7,10)；
  4. l -7,10：原理同上，偏移 (-7,10)；
  5. l -7,-10：原理同上，偏移 (-7,-10)，回到了起始坐标。

Z 和 z 指令 ​

手动闭合路径

上面的示例中，我们从起始坐标 (3,10) 处 open 了一条 path，然后绘制了几条直线，最后回到了起始坐标 (3,10)，然而却没有完全 close 这条 path：

  • 蓝色圆圈标注的地方没有闭合
使用 Z/z 自动闭合路径

解决这个问题的方法就是使用 Z 或 z 即 close-path 指令（大小写不敏感，Z 和 z 一模一样的效果）：

  • 使用 Z 代替了 L3,10

H/h 和 V/v 指令 ​

L/l 指令可以绘制任意的直线，同时 SVG 还提供了 H/h V/v 专门用于绘制水平和垂直的直线。

基本语法：
html
<path d="... H x V y ..." />
<path d="... h dx v dy ..." />
  • H x：从当前坐标水平画线至 (x, 当前Y坐标)，并将此坐标设为当前坐标；
  • V y：从当前坐标垂直画线至 (当前X坐标, y)，并将此坐标设为当前坐标；
  • h dx v dy：使用相对坐标。
绝对坐标示例：H V
M 10,5 H 30 V 30 H 0 Z 解释说明：
  1. M 10,5：当前坐标变为 (10,5)；
  2. H 30：从当前坐标画水平线至坐标 (30,5)，X坐标不变；
  3. V 30：从当前坐标画垂直线至坐标 (30, 30)，X坐标不变；
  4. H 0：从当前坐标画水平线至坐标 (0, 30)，Y坐标不限；
  5. Z：关闭路径（并从当前坐标画直线至起始坐标）。
相对坐标示例：h v
M 10,5 h 20 v 25 h -30 z 解释说明：
  1. M 10,5：当前坐标变为 (10,5)；
  2. h 20：从当前坐标画水平线至新坐标，新坐标往右偏移 20（X坐标值加上20），Y坐标不变；
  3. v 25：从当前坐标画水平线至新坐标，新坐标往下偏移 25（Y坐标值加上20），X坐标不变；
  4. h -30：从当前坐标画水平线至新坐标，新坐标往左偏移 30（X坐标值减去20），Y坐标不变；
  5. Z：关闭路径（并从当前坐标画直线至起始坐标）。

Q 和 q 指令 ​

Q 和 q 指令用于绘制二次贝塞尔曲线（Quadratic Bézier Curves），关于贝塞尔曲线原理请参考：知乎专栏-贝塞尔曲线。

要绘制二次贝塞尔曲线，需要3个点坐标：起始点坐标、控制点坐标、结束点坐标。

基本语法为：
html
<path d="... Q x,y a,b" />
<path d="... q dx,dy da,db" />
  • 其中画笔的当前坐标为起始坐标，
  • (x,y)：是控制点坐标，
  • (a,b)：是结束点坐标(绘制结束后，把此坐标设置为当前坐标)。
  • 小写 q 表示使用相对坐标，(dx,dy) (da,db) 分别是控制点坐标和结束点坐标的坐标偏移。
示例：
M 0,0 Q 10,0 10,10 Z 指令说明：
  1. M 0,0：把画笔移动至坐标 (0,0)；
  2. Q 10,0 10,10：绘制二次贝塞尔曲线，(0,0) 是起始坐标，(10,0) 是控制点坐标，(10,10) 是结束点坐标（并把此坐标设置为当前坐标）；
  3. Z：连接当前坐标 (10,10) 至路径的起始坐标 (0,0)。

T 和 t 指令 ​

T/t 指令总是跟随在一个 Q/q 指令之后，表示在前一个二次贝塞尔曲线后再绘制一条平滑二次贝塞尔曲线。

基本语法为：
html
<path d="... T x,y" />
<path d="... t dx,dy" />
  • 前一条曲线的结束点坐标为本次曲线的起始点坐标；
  • 本次曲线的控制点坐标是根据切线自动计算的；
  • (x,y)：是本次曲线的结束点坐标；
  • 小写 t 使用相对坐标，(dx,dy) 是结束点坐标相较于当前坐标的偏移量。
示例：
新窗口打开

第一条曲线是由 2 个 Q 指令绘制的，第二个 Q 指令的控制点是手动输入的：

html
<path class="curve" d="M 3,10 Q 8,5 11,10 Q 14,15 22,10 " />

第二条曲线是由 1 个 Q 指令和 1 个 T 指令绘制的，T 指令的控制点是根据切线自动计算计算出来的：

html
<path class="curve" d="M 3,10 Q 8,5 11,10 T 22,10 " />

WARNING

T/c 指令总是跟在 Q/q 指令之后。

C 和 c 指令 ​

C/c 指令用于会议三次贝塞尔曲线（Cubic Bézier Curves）。

要绘制三次贝塞尔曲线，需要4个坐标：起始点坐标、两个控制点坐标、结束点坐标。

基本语法：
html
<path d="... C x1,x2 x2,y2 a,b ..." />
<path d="... c dx1,dx2 dx2,dy2 da,db ..." />
  • 其中起始点坐标就是当前坐标；
  • (x1,y1) (x2,y2)：是两个控制点坐标；
  • (a,b)：是结束点坐标；
  • 小写 c 表示使用相对坐标，(dx1,dy1) (dx2,dy2) (da,db)是控制点和结束点的坐标偏移。
示例：

S 和 s 指令 ​

与二次曲线一样，三次曲线也支持平滑曲线（第一个控制点坐标是自动计算的，只需要提供第2个控制点坐标）。

基本语法：
html
<path d="... S x2,y2 a,b ..." />
<path d="... s dx2,dy2 da,db ..." />
  • 其中起始点坐标就是当前坐标；
  • 第一个控制点坐标是自动计算的；
  • (x2,y2)：是第2个控制点坐标；
  • (a,b)：是结束点坐标；
  • 小写 s 表示使用相对坐标，(dx2,dy2) (da,db)是第2个控制点和结束点的坐标偏移。

示例：略。

WARNING

S/s 指令总是跟在 C/c 指令之后。

A 和 a 指令 ​

贝塞尔曲线虽然灵活，但是却无法绘制完全的(椭)圆弧形（Elliptical Curves），所以 SVG 提供了 A 和 a 指令。

基本语法：
html
 <path d="... A rx ry x-axis-rotation large-arc-flag sweep-flag x y ..." />
 <path d="... a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy ..." />
  • rx：X轴半径；
  • ry：Y轴半径，如果 rx=ry，则绘制的是标准圆弧；如果rx≠ry，则绘制的是椭圆弧；
  • x-axis-rotation：X轴旋转角度；
  • large-arc-flag：1: 绘制圆形的大弧一侧，0: 绘制小弧一侧；
  • sweep-flag：1: 顺时针方向，0: 逆时针方向；
  • x y：弧线的终点坐标，起点坐标是画笔的当前坐标；dx dy 表示终点坐标偏移量。
示例：

TIP

A/a 是英文单词弧线(Arc) 的首字母。

简洁语法 ​

为了缩减 SVG 文件大小，提高网络传输效率，以上的指令可以有以下的简写方式：

  • M x,y → Mx,y
  • M x1,y1 L x2,y2 → Mx1,y1 x2,y2
  • L x1,y1 L x2,y2 L x3,y3 → Lx1,y1 x2,y2 x3,y3
  • L-1,-1 → L-1-1
  • M0.5,0.9 → M.5,.9

折线（<polyline>） ​

基本语法：
html
<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 ......" />
  • points：表示的是连续的坐标，(x1,y1) 是第一个坐标，(x2,y2) 是第二个坐标，以此类推；
  • 坐标总是绝对的；
  • 坐标可以用空格或逗号隔开，x1,y1 x2,y2 x3,y3 = x1 y1 x2 y2 x3 y3
示例：

多边形（<polygon>） ​

基本语法：
html
<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 ......" />
  • <polygon> 与 <polyline> 的语法几乎一样，除了 <polygon> 会自动把最后一个坐标与第一个坐标相连，形成闭合；
示例：

相关 DOM 接口 ​

小结 ​

本节介绍了 <path> <polyline> <polygon> 的用法，接下来我们介绍如何在 SVG 中绘制文本。

显示/隐藏评论(推荐使用 GitHub 登录)
0  Words
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v3.1.3