【前端SVG】HTML中SVG实现path路径绘制

前言

在学习了基本图形的绘画后，我们将更深入的学习SVG中的path路径绘制，

小写命令符的区别

在上一篇文章中的两个例子，我们的命令都是使用大写字母的方式来绘制我们的图形的，其实也可以使用小写字母的方式来绘画。但，小写字母是相对命令，它们的参数不是指定一个明确的目标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个200*100的矩形，用相对命令可以这样描述：

<path d="M10 10 h 200 v 80 h -200 Z" fill="red"/>

以上代码，我们先将画笔定在了10，10处，使用L命令的简写方法，从这里开始，将画笔往右边移动200px，构成一条水平线，再向下方移动100px，再向左边移动100px，最后使用Z闭合命令将图形闭合起来。这样就形成一个200*100的矩形了。

曲线的绘画

在前面的path例子，你可能会有这样子的疑问：我们可以通过rect、polyline 、 polygon 标签实现，这样子更简单。为什么要使用path呢？

如果你只是画直线，那么其他元素可能会更好用，但是，path却是众多开发者在SVG绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成path可能有所不同，因为另外两种方法只需要指明点，而path在这方面的语法会更复杂一些。

三次贝塞尔曲线

三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：

C x1 y1, x2 y2, x y

<path d="M10 10 C 20 30, 40 30, 50 10" stroke="black" fill="transparent"/>

贝塞尔曲线命令也有简写方式为S，我们来看看S命令的语法：

<path d="M10 80 Q 95 10 180 80 S 265 150 360 80" stroke="black" fill="transparent"/>

S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

二次贝塞尔曲线

二次贝塞尔曲线只需要一个控制点，用于确定起点和终点的曲线斜率。需要两组参数，控制点和终点坐标：

Q x1 y1, x y

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

像三次贝塞尔曲线一样，它也有简写的命令，叫T，可以通过更简短的参数，延长二次贝塞尔曲线。T会通过前一个控制点，推断出一个新的控制点。

T x y

<path d="M10 80 Q 95 10 180 80 T 340 80" stroke="black" fill="transparent"/>

弧形

弧形可以视为圆形或椭圆形的一部分，命令A是绘制一条曲线的命令。我们看看它都需要哪一些参数

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

分别对应的是x轴半径、y轴半径、弧形旋转、角度大小、弧线方向

我们看看下面的这个例子

<path d="M10 315
   L 110 215
   A 30 50 -45 0 1 215.1 109.9
   L 315 10" stroke="black" fill="red" stroke-width="2"/>

最后

本篇文章讲述了SVG路径中如何绘制贝塞尔曲线、弧形，相比本系列的前三篇文章理解起来可能会复杂，如果你熟悉代数或者微积分的话，会更容易理解。

感谢你的阅读！

😀😀 关注我，不迷路！ 😀😀

这篇好文章是转载于：学新通技术网