一篇文章带你了解SVG 路径
共 1325字，需浏览 3分钟
·
2022-05-25 10:47
回复“前端”即可获赠前端相关学习资料
path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG
一、弧线
使用
例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 A30,50 0 0,1 100,100"style="stroke:#660000; fill:none;"/>svg>
运行结果:
例2：
<svg width="500" height="120"><path d="M40,20 A30,30 0 0,0 60,70" style="stroke: #cccc00; stroke-width:2; fill:none;">path><path d="M40,20 A30,30 0 1,0 60,70" style="stroke: #ff0000; stroke-width:2; fill:none;">path><path d="M40,20 A30,30 0 1,1 60,70" style="stroke: #00ff00; stroke-width:2; fill:none;">path><path d="M40,20 A30,30 0 0,1 60,70" style="stroke: #0000ff; stroke-width:2; fill:none;">path>svg>
运行结果:
1. 二次贝塞尔曲线
还可以使用
示例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 Q50,100 100,100"style="stroke: #006666; fill:none;"/>svg>
运行结果:
该示例绘制一条二次 Bezier 曲线，从50,50到点100,100，控制点为50,200。控制点是 Q 命令上设置的两个参数中的第一个。
控制点像磁铁一样拉动曲线。曲线上的一个点离控制点越近，控制点就越往里拉，这意味着它离控制点越近。以下是一些在图像上绘制控制点的示例：
实际上，如果从起点画一条线到控制点，再画一条从控制点到终点的线，那么从第一条线的中间到第二条线的中间就是曲线的切线。
2. 三次贝塞尔曲线
使用C和c命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线，除了它们具有两个控制点而不是一个控制点。与线条一样，大写命令(C)使用绝对坐标作为其终点，小写命令(c)使用相对坐标（相对于起点）:
<path d="M50,50 C75,80 125,20 150,50"style="stroke: #006666; fill:none;"/>
这是绘制了控制点的结果图像，运行后结果如下。
二、闭合路径
该
示例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 L100,50 L100,100 Z"style="stroke: #006666; fill:none;"/>svg>
运行结果:
三、组合命令
可以在同一
示例
<svg width="500" height="225"><path d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;">path>svg>
此示例绘制一条直线、一条圆弧、一条二次Bezier曲线，并以一条回到起点的直线闭合路径结束。以下是生成的图像：
四、填充路径
可以使用fill CSS属性填充路径。下面是一个实例：
示例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M100,100 L150,100 L150,150 Z"style="stroke: #ff0000; stroke-width: 2px; fill : #ccccff;"/>svg>
运行结果:
注：
形状的内部是如何用红色填充的。
五、总结
本文基于SVG基础，介绍了如何画曲线，重点介绍了塞尔曲线的画不规则图像，二次贝塞尔曲线，三次贝塞尔曲线的实际应用 ，通过项目，详细介绍了
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望能够帮助你更好的学习。
------------------- End -------------------
往期精彩文章推荐：
欢迎大家点赞，留言，转发，转载，感谢大家的相伴与支持
想加入前端学习群请在后台回复【入群】
万水千山总是情，点个【在看】行不行