SVG <path>

SVG 路径是用于描述图形的最强大和灵活的方法之一。路径由一系列的命令组成，这些命令告诉浏览器如何绘制图形。每个命令包含一个字母和一组参数，用来指定操作类型和操作所需的数据。

基本路径命令

SVG 路径命令包括以下基本命令：

• M：移动到指定的坐标
• L：从当前点绘制一条直线到指定的坐标
• H：从当前点绘制一条水平线到指定的 x 坐标
• V：从当前点绘制一条垂直线到指定的 y 坐标
• C：绘制一个三次贝塞尔曲线
• S：绘制一个光滑的三次贝塞尔曲线
• Q：绘制一个二次贝塞尔曲线
• T：绘制一个光滑的二次贝塞尔曲线
• A：绘制一个椭圆弧

示例代码

下面是一个简单的 SVG 路径示例，绘制一个带有圆角的矩形：

// www.javascriptcn.com code example
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10
           L 90 10
           A 10 10 0 0 1 100 20
           L 100 80
           A 10 10 0 0 1 90 90
           L 10 90
           A 10 10 0 0 1 0 80
           L 0 20
           A 10 10 0 0 1 10 10
           Z" fill="none" stroke="black"/>
</svg>

在上面的示例中，我们使用了 M、L 和 A 命令来绘制一个带有圆角的矩形。首先我们移动到 (10, 10) 点，然后绘制一条水平线到 (90, 10) 点，接着绘制一个椭圆弧，最后闭合路径。

总结

SVG 路径是一种强大的工具，可以用来创建各种复杂的图形。熟练掌握路径命令是成为优秀的 SVG 开发者的关键。希望通过本章节的介绍，你对 SVG 路径有了更深入的理解。