SVG 路径学习笔记

什么是SVG路径？

在SVG中，路径是由一系列的命令和参数构成的。这些命令用于描述如何在SVG画布上绘制形状。

路径命令

路径命令是构成SVG路径的基本元素。它们指定了在画布上绘制路径时要遵循的路径。以下是常见的路径命令：

• M (moveto)：将绘图点移到指定的坐标
• L (lineto)：从当前点绘制一条直线到指定的坐标
• H (horizontal lineto)：从当前点绘制一条水平线到指定的x坐标
• V (vertical lineto)：从当前点绘制一条竖直线到指定的y坐标
• C (curveto)：绘制一条三次贝塞尔曲线
• S (smooth curveto)：绘制一条平滑的三次贝塞尔曲线
• Q (quadratic Bel curve)：绘制一条二次贝塞尔曲线
• T (smooth quadratic Bel curve)：绘制一条平滑的二次贝塞尔曲线
• A (elliptical Arc)：绘制一条椭圆弧线
• Z (closepath)：关闭当前路径

SVG路径实例

以下是一个简单的SVG路径实例，它绘制了一个圆形：

Copy Code
<svg width="100" height="100">
  <path d="M50,50 m-25,0 a25,25 0 1,0 50,0 a25,25 0 1,0 -50,0" fill="none" stroke="black"/>
</svg>

解释：

• M50,50: 将绘图点移动到坐标 (50,50)。
• m-25,0: 相对于当前点，将绘图点向左移动25个像素。
• a25,25 0 1,0 50,0 a25,25 0 1,0 -50,0 ：绘制两个半径为25像素的弧线，以 (50,50) 为中心向左和向右延伸。

这将绘制一个圆形，中心在 (50,50)，半径为25。

总结

SVG路径可以用来绘制各种形状，包括直线、曲线、弧线和闭合路径。通过了解路径命令和参数，您可以创建精确的SVG形状并将其集成到网站或其他项目中。