path元素是用于定义形状的通用元素。所有基本形状都可以使用路径元素创建。SVG元素用于绘制由直线、圆弧、曲线等组成的高级形状，有或没有填充。元素可能是所有SVG形状中最先进和最通用的。1.Arc使用元素绘制弧是使用A和a命令完成的。与直线一样，大写命令(A)使用绝对坐标作为终点，而小写命令(A)使用相对坐标（相对于起点）。示例运行结果：示例2：运行结果：1.二次贝塞尔曲线您还可以使用元素绘制二次贝塞尔曲线。使用Q和Q命令绘制二次贝塞尔曲线。与直线一样，大写命令(Q)使用绝对坐标作为终点，而小写命令(q)使用相对坐标（相对于起点）。下面是一个简单的二次曲线示例：示例运行结果：本例绘制一条从50,50点到100,100点的二次贝塞尔曲线，控件点是50,200。控制点是Q命令上设置的两个参数中的第一个。控制点像磁铁一样拉动曲线。曲线上的一点离控制点越近，控制点被拉的越多，也就是离控制点越近。下面是一些在图像上画控制点的例子：实际上，如果你从起点到控制点画一条线，从控制点到终点再画一条线，那么第一条线的中间点的距离线到第二条线中间是曲线的切线。2.三次贝塞尔曲线使用C、c命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线，只是它们有两个控制点而不是一个。就像一条线，大写命令（C）使用绝对坐标作为终点，小写命令（c）使用相对坐标（相对于起点）：这是绘制控制点的结果图，运行后结果如下。2.关闭路径元素有一个关闭路径的快捷命令，意思是从最后一个点回到第一个点画一条线。命令是Z（或z-大写和小写闭合路径命令之间没有区别）。例子"style="stroke:#006666;fill:none;"/>运行结果：3.组合命令您可以在同一个元素中组合路径命令。示例这个例子画了一条直线、一条弧线、一条二次贝塞尔曲线，并以一条回到起点的直线闭合路径结束。下面是生成的图像：4.填充路径可以使用fillCSS属性填充路径。这是一个示例：示例运行结果：注：形状内部如何填充红色。五、总结本文介绍了如何在SVG基础上绘制曲线，重点介绍了Serre曲线、二次贝塞尔曲线的不规则图像的绘制，以及三次贝塞尔曲线的实际应用。通过项目，详细介绍了闭合路径，填充路径的实际应用。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。代码很简单，希望能帮助大家更好的学习。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
