一旦我们介绍了基本的形状，现在是时候进入 path 元素了。路径是最强大的SVG元素。我们可以用路径定义几乎任何东西，如果你打开任何SVG文件，你主要看到的是路径。
路径的形状由 d 属性定义。这里我们定义几个绘图命令。
这里我们只有两个最基本的命令，move-to和line-to。move-to命令将光标移动到一个点而不绘制直线，line-to命令从上一个点绘制直线。一个命令总是延续前一个命令。
汉堡菜单图标
在我们开始箭头示例之前，让我们绘制一个简单的汉堡菜单图标。我们使用move-to（ M ）和line-to（ L ）命令在同一路径内绘制三条线。首先，我们移动到最上面一行的开始（ M -40, -40 ），并绘制一条线到其结束（ L 40, -40 ）。
然后我们继续以同样的方式绘制更多的线。我们可以在同一个路径中有多个移动到命令。X和Y坐标之间的逗号是可选的。我们这次跳过他们。
心形图标
下面是另一个例子：
在上面的例子中，如果我们减少 stroke-width 属性的值，那么我们就会意识到上面的代码实际上是一个简单的V形。
箭头图标
接下来我们来看今天的例子，我们可以用类似的方法画一个箭头。我们从中间的一条线开始，然后我们继续画上翼。
您可能注意到，在上一个示例中，我们还使用了 stroke-linejoin 属性来使连接舍入。它的工作方式与 stroke-linecap 类似，但只影响行尾。如果没有该属性，同一行将如下所示。
然后我们可以再次移动到水平线的末端，并向下绘制一条直线以绘制箭头的下翼。
