HTML5——SVG 之 path 详解，作为前端程序员都应掌握

SVG <path> 元素是使用文本描述路径的SVG基本形状。它可以用来创建一些复杂的形状，也可以用来创建简单的形状，如线条和多边形。

以下是一些使用 <path> 元素的示例：

1. 创建一个简单的线条：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 190" stroke="black" />
</svg>

在这个例子中，<path> 元素的 d 属性定义了一条从点 (10,10) 到点 (190,10) 的水平线。M 表示移动到，H 表示水平到。

2. 创建一个三角形：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 L 100 100 L 200 10 L 10 10" stroke="black" fill="transparent" />
</svg>

在这个例子中，<path> 元素的 d 属性定义了一个开放的三角形。L 表示线到。

3. 创建一个圆形：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100 m -50 0 a 50 50 0 1 0 100 0 a 50 50 0 1 0 -100 0" fill="transparent" stroke="black" />
</svg>

在这个例子中，<path> 元素的 d 属性定义了一个圆形。a 表示弧到。

4. 创建一个五角星：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100 L 50 80 L 75 10 L 100 10 L 125 10 L 150 80 L 100 100 L 100 100" stroke="black" fill="transparent" />
</svg>

在这个例子中，<path> 元素的 d 属性定义了一个五角星形。

以上示例都是使用 <path> 元素创建的简单形状。实际上，<path> 元素可以创建更复杂的形状，包括圆、椭圆、曲线（如贝塞尔曲线）等。

注意：在以上示例中，M、L、H、a 等都是 SVG 路径的命令。每个命令都有特定的意义和用法。例如，M 表示“移动到”，L 表示“线到”，Z 表示“闭合路径”等。