HTML5——SVG 之 path 详解，想转行当程序员的必看

SVG <path> 元素是使用文本描述路径的SVG基本形状。它可以用来创建直线、弧、圆、贝塞尔曲线等复杂的形状。

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

1. 创建一条直线：

<path d="M10 10 H 90" stroke="black" />

这里 d 属性的值 "M10 10 H 90" 表示从点 (10,10) 开始，水平画一条线到 x 轴上的 90 点。

2. 创建一个矩形：

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="blue" />

这里 d 属性的值 "M10 10 H 90 V 90 H 10 L 10 10" 表示从点 (10,10) 开始，水平画一条线到 x 轴上的 90，然后垂直画一条线到 y 轴上的 90，再水平画一条线回到起点 (10,10)，最后闭合图形。

3. 创建一个圆形：

<path d="M10 10 a 40 40 0 0 0 80 0" stroke="red" fill="transparent" />

这里 d 属性的值 "M10 10 a 40 40 0 0 0 80 0" 表示从点 (10,10) 开始，画一个半径为 40 的圆弧。

4. 创建一个心形：

<path d="M10,10 A 40 40 0 0 0 90 90 A 40 40 0 0 0 10 90" stroke="red" fill="transparent" />

这里 d 属性的值 "M10,10 A 40 40 0 0 0 90 90 A 40 40 0 0 0 10 90" 表示从点 (10,10) 开始，画两个半径为 40 的圆弧，形成心形。

以上示例中，stroke 属性用于设置形状边缘的颜色，fill 属性用于设置形状内部的填充颜色。

注意：在 SVG 中，<path> 元素的 d 属性是用来描述路径的命令字符串，其中包含多个命令，每个命令都有自己的用法和意义。例如，"M" 表示移动到，"L" 表示画直线到，"H" 表示画水平线到，"V" 表示画垂直线到，"A" 表示画圆弧等。