SVG 路径元素

SVG（可缩放矢量图形）是一种用于描述二维图形的 XML 格式。它可以被用于网页上的图像制作、绘图等。

在 SVG 中，路径元素可以用来描述一个图形的各个部分。路径元素通过在其 d 属性中指定一组路径指令来描述一个路径。

以下是一些常用的路径指令：

• M：移动路径的起点到指定坐标位置
• L：从当前点连接一条直线至指定坐标位置
• H：从当前点连接一条水平线至指定的 x 坐标位置
• V：从当前点连接一条竖直线至指定的 y 坐标位置
• Z：闭合当前路径
• C：从当前点连接一条三次贝塞尔曲线至指定坐标位置
• S：从当前点连接一条光滑的三次贝塞尔曲线至指定坐标位置

这些指令可以拼接在一起来描述一个完整的路径。

以下是一个简单的 SVG 路径元素示例：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 V 90 H 10 Z" />
</svg>

该示例中的路径元素描述了一个矩形，起点坐标为 (10, 10)，逆时针绘制一条直线到 (90, 10)，再向下绘制一条直线到 (90, 90)，再向左绘制一条直线到 (10, 90)，最后闭合路径。

SVG 路径元素不仅可以描述矩形，还可以描述各种形状，例如圆形、椭圆、直线、曲线等等。

SVG 路径元素是一个非常强大的工具，使用它可以创造出各种可爱的图形。如果你有图形绘制的需求，不妨尝试一下使用 SVG 路径元素来实现！

参考链接：

• SVG Path tutorial
• SVG Path Element