第六天：如何使用 SVG 绘制基本路径

介绍完基本形状后，我们就该学习path 元素了。路path 功能最强大的 SVG 元素。我们可以用路径定义几乎任何东西，如果你打开任何 SVG 文件，大部分都会看到path 。

路径的形状由 d 属性定义。这里我们定义了几条绘图命令。命令总是以定义命令类型的字母开始，以坐标结束。在这里，我们只有两个最基本的命令，即 move-to 和 line-to。移动到点（move-to）命令是将光标移动到一个点，但不画线；直线到点（line-to）命令是从前一个点开始画一条直线。一条命令总是延续前一条命令。当我们画一条直线时，我们只定义了终点。起点就是前一条命令的终点。

在学习箭头示例之前，我们先来绘制一个简单的汉堡包菜单图标。我们使用移动到（M）和直线到（L）命令在同一路径上绘制三条直线。首先，我们移动到最上面一条线的起点（M -40, -40），然后画一条线到它的终点（L 40, -40）。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -40, -40
        L  40, -40"
    stroke="#333333"
    stroke-width="25"
    stroke-linecap="round"
  />
</svg>

然后，我们继续用同样的方法绘制更多线条。路径最酷的地方在于它不一定是连续的。我们可以在同一路径中使用多个移动到命令。X 和 Y 坐标之间的逗号是可选的。这次我们不加逗号。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -40 -40
        L  40 -40 
        M -40   0 
        L  40   0 
        M -40  40 
        L  40  40"
    stroke="#333333"
    stroke-width="25"
    stroke-linecap="round"
  />
</svg>

下面是另一个使用move-to命令和两个line-to命令制作的示例。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -30 -20 
        L   0  10 
        L  30 -20"
    fill="none"
    stroke="black"
    stroke-width="80"
    stroke-linecap="round"
  />
</svg>

在上面的示例中，如果我们减小 stroke-width 属性的值，就会发现上面的代码实际上是一个简单的 V 形。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -30 -20 
        L   0  10 
        L  30 -20"
    fill="none"
    stroke="black"
    stroke-width="10"
    stroke-linecap="round"
  />
</svg>

然后，我们再来看今天的例子，我们可以用非常类似的方法来画一个箭头。我们先在中间画一条线，然后继续画线，画出上翼。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -70 0 
        L 70 0 
        L 30 -50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

您可能会注意到，在上一个示例中，我们还使用了 stroke-linejoin 属性来使连接处变圆。它的作用与 stroke-linecap 类似，但只影响线条的末端。如果没有该属性，同样的线条会如下所示。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -70 0 
        L 70 0 
        L 30 -50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
  />
</svg>

然后，我们可以再次移动到水平线的末端，向下画一条直线来完成箭头下翼的绘制。您可能会注意到，在本页和其他页面底部的导航按钮中，我们也有一个类似的 SVG。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <path
    d="M -70 0 L 70 0 L 30 -50 M 70 0 L 30 50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>
分享：