SVG <path>元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或者不带填充。 <path>元素可能是所有元素中最先进，用途最广泛的SVG形状。它可能也是最难掌握的元素。

路径示例

让我们首先从一个简单的SVG <path>示例开始：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,30 0 0,1 35,20
             L100,100
             M110,110
             L100,0"
          style="stroke:#660000; fill:none;"/>    
</svg>

注意图像如何包含一条弧线和两条线，以及第二条线如何不与第一条弧线和线连接。

所有带有<path>元素的图形都在d属性中指定。 d属性包含绘图命令。在上面的示例中，M表示"移至"命令，A表示"弧线"命令，L表示"线"命令。命令被提供给"虚拟笔"。这支笔可以移动，绘制形状等。

设置和移动笔

d属性内的第一个绘图命令应该始终是移动命令。在绘制任何内容之前，应将虚拟笔移动到某个位置。这是通过使用" M"命令来完成的。这是一个简单的示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50"
          style="stroke:#660000; fill:none;"/>
</svg>

本示例将虚拟笔移动到点" 50,50"。下一个绘图命令将从该点开始。

线条

画一条线可能是我们可以赋予<path>元素的最简单的命令。使用" L"和" l"(小写的L)命令完成画线。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             L100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

本示例从点50,50(M命令的点)到点100100(L命令的点)画一条线。

L和l命令之间的区别在于，大写版本(L)在传递给命令的绝对点上画一条线，而小写版本(l)在相对的命令上画一条线。点传递给命令。相对点是虚拟笔在线条开始之前的点，再加上赋予" l"命令的坐标。

如果虚拟笔位于" 50,50"，并且我们使用" l100,100"命令，则线条将被绘制为" 50 + 100,50 + 100" =" 150,150"。无论虚拟笔的位置如何，使用" L100,100"命令都会将线精确地绘制为" 100,100"。

绘图移动虚拟笔

路径形状始终从最后一个虚拟笔尖绘制到新点。每个绘图命令都有一个终点。执行该命令后，虚拟笔尖将位于该绘图命令的端点。下一个绘图命令将从该点开始。

弧线

使用 <path>元素绘制弧线是通过A和a命令完成的。像直线一样，大写命令(A)使用绝对坐标作为端点，小写命令(a)使用相对坐标(相对于起点)。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,50 0 0,1 100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

" style =" stroke：#660000; fill：none;" />此示例从点50,50到点100,100(在A命令的最后指定)绘制了一条弧。

圆弧的半径由在" A"命令上设置的两个第一个参数设置。第一个参数是rx(x方向的半径)，第二个参数是ry(y方向的半径)。将" rx"和" ry"设置为相同的值将导致圆弧。将" rx"和" ry"设置为不同的值将导致椭圆弧。在上面的示例中，" rx"设置为" 30"，" ry"设置为" 50"。

在" A"命令上设置的第三个参数是" x轴旋转"。与正常的x轴相比，这将设置圆弧的x轴的旋转。在上面的示例中，" x轴旋转"设置为" 0"。大多数时候，我们不需要更改此参数。

第四个和第五个参数是" arc-arc-flag"和" sweep-flag"参数。 " arc-arc-flag"决定是否绘制满足起点，终点以及" rx"和" ry"的较小或者较大的圆弧。这是绘制4个圆弧的示例，每个圆弧具有" large-arc-flag"和" sweep-flag"的不同组合：

<path d="M40,20  A30,30 0 0,0 70,70"
    style="stroke: #cccc00; stroke-width:2; fill:none;"/>

<path d="M40,20  A30,30 0 1,0 70,70"
    style="stroke: #ff0000; stroke-width:2; fill:none;"/>

<path d="M40,20  A30,30 0 1,1 70,70"
    style="stroke: #00ff00; stroke-width:2; fill:none;"/>

<path d="M40,20  A30,30 0 0,1 70,70"
    style="stroke: #0000ff; stroke-width:2; fill:none;"/>

从" 40,20"到点" 60,70"可以绘制四个不同的弧。一个长弧，一个小弧以及每个小/大弧的两个镜像版本。 " arc-arc-flag"决定是绘制大弧还是小弧。 " sweep-flag"确定弧是否围绕从起点到终点的轴线镜像。实际上，"扫旗"控制弧的绘制方向(顺时针或者逆时针)，从而产生"镜像"效果。

绘制的第一个弧是黄色弧。将" arc-arc-flag"设置为0表示将绘制较小的可能弧。 " sweep-flag"也设置为0，表示未镜像弧。这是黄色的弧形：

绘制的第二个弧是红色弧。将" arc-arc-flag"设置为" 1"意味着将两个可能的弧中较大的一个从" 40,20"绘制为" 60,70"。这是一起显示的黄色和红色弧线，以说明差异：

绿色和蓝色弧线(来自前面示例中的所有四个弧线)与黄色和红色弧线相同，但是绘制时将" sweep-flag"设置为" 1"。这意味着它们将绘制相同的弧，但在从起点到终点的轴上镜像。

二次贝塞尔曲线

也可以使用<path>元素绘制二次Bezier曲线。使用" Q"和" q"命令绘制二次贝塞尔曲线。与线条一样，大写命令(Q)使用绝对坐标作为端点，小写命令(q)使用相对坐标(相对于起点)。这是一个简单的二次曲线示例：

<path d="M50,50 Q50,100 100,100" 
      style="stroke: #006666; fill:none;"/>

该示例绘制了从" 50,50"到点" 100,100"的二次贝塞尔曲线，控制点为" 50,200"。控制点是在Q命令上设置的两个参数中的第一个。

控制点像磁铁一样拉动曲线。曲线上的点离控制点越近，控制点向控制点内拉的越多，这意味着它将越靠近控制点。这是在图像上绘制控制点的更多示例：

实际上，如果我们从起点到控制点画一条线，从控制点到终点画另一条线，那么从第一条线的中间到第二条线的中间的线将是切线曲线的这是一张图片，说明了这一点：

三次贝塞尔曲线

使用C和C命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线，除了它们具有两个控制点而不是一个控制点。与线条一样，大写命令(C)使用绝对坐标作为端点，小写命令(c)使用相对坐标(相对于起点)。这是一个例子：

<path d="M50,50 C75,80 125,20 150,50"
      style="stroke: #006666; fill:none;"/>

这也是绘制了控制点的结果图像。

我们可以使用三次贝塞尔曲线创建高级曲线。这里有一些例子：

封闭路径

<path>元素具有用于关闭路径的快捷命令，这意味着从最后一点回到第一个点画一条线。该命令为Z(或者z，大写和小写闭合路径命令之间没有区别)。这是一个例子：

<path d="M50,50 L100,50 L100,100 Z"
    style="stroke: #006666; fill:none;"/>

组合命令

我们可以在相同的<path>元素内合并path命令。这是一个例子：

<path d="M100,100
         L150,100
         a50,25 0 0,0 150,100
         q50,-50 70,-170
         Z"
      style="stroke: #006666; fill: none;"/>

本示例绘制一条直线，一条圆弧，一条二次贝塞尔曲线，并以一条直线将其关闭，并返回到起点，从而结束了该过程。

填充路径

我们可以使用fillCSS属性来填充路径。这是一个例子：

<path d="M100,100 L150,100 L150,150  Z"
      style="stroke: #0000cc;
             stroke-width: 2px;
             fill  : #ccccff;"/>

请注意，形状的内部是如何用浅蓝色填充的。

标记物

我们可以在<path>元素上使用标记。标记是位于路径起点，中间和终点的小符号，表示路径的方向。例如，在路径的开始处有一个圆形或者正方形，而在路径的末尾有一个箭头。

标记在标记元素文本中有更详细的说明。

符号快捷方式

如果我们需要一次又一次使用同一条命令，则可以省略该命令字母，而只需提供一组额外的参数即可，就像该命令所在的位置一样。这是一个例子：

<path d="M10,10   l100,0  0,50  -100,0  0,-50"
      style="stroke: #000000; fill:none;" />

此示例显示了如何将添加参数传递给" l"命令，就像在每个参数对的前面放置了" l"一样。这也适用于其他路径命令。

路径命令

以下是SVGpath元素可能的笔命令列表。每个命令由一个字母和一组数字(坐标等)组成，它们是该命令的参数。大写命令通常将坐标参数解释为绝对坐标。小写命令通常将坐标参数解释为相对于当前笔位置而言是相对的。