SVG <path> 路径

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG <path>元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或不带填充。该 <path>元素可能是所有元素中最先进，最通用的SVG形状。它可能也是最难掌握的元素。

SVG 在线编辑器 -  可在线编辑SVG，根据SVG可转为源代码

Path示例

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表示“Move to”(移动到)命令，A表示“Arc”(弧形)命令，L表示“Line”(直线)命令。 这些命令被提供给“虚拟笔”。 这支笔可以移动，可以画形状等。

设置和移动笔

<path>d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前，你应该把虚拟笔移到某个地方。这是使用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命令的点）到点100,100（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>

运行后结果如下:

本示例从点50,50到点100,100（在A命令中最后指定）绘制一条弧。
圆弧的半径由A命令上设置的前两个参数设置。 第一个参数是rx(x方向的半径)，第二个参数是ry(y方向的半径)。 将rx和ry设置为相同的值将产生圆弧。 将rx和ry设置为不同的值将产生椭圆弧。 在上面的示例中，rx设置为30，ry设置为50。
在A命令上设置的第三个参数是x轴旋转(x-axis-rotation)。 与正常的x轴相比，这将设置圆弧的x轴的旋转。 在上面的示例中，x轴旋转设置为0。大多数情况下，您无需更改此参数。

第四和第五个参数是大圆弧标志(large-arc-flag)和扫描标志(sweep-flag)参数。大圆弧标志(large-arc-flag)决定是绘制满足起点、终点和rx和ry的较小或较大的圆弧。下面是一个绘制4个圆弧的示例，每个圆弧具有大圆弧标志(large-arc-flag)和扫描标志(sweep-flag)的不同组合：

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

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

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

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

</svg>

运行后结果如下:

可以从40,20到点60,70绘制四个不同的弧。 一个长弧，一个小弧以及每个小/大弧的两个镜像版本。 大弧标记确定要绘制大弧还是小弧。 扫描标志确定弧是否围绕从起点到终点的轴镜像。 实际上，扫描标志控制弧的绘制方向（顺时针或逆时针），从而产生“镜像”效果。

绘制的第一个圆弧是黄色圆弧。 将大圆弧标志设置为0意味着将绘制较小的可能圆弧。 扫描标志也被设置为0，这意味着圆弧不会镜像。 下面是黄色弧线：

绘制的第二个圆弧是红色圆弧。 将大圆弧标志设置为1意味着绘制两个可能的圆弧中较大的一个，范围从40,20到60,70。 下面是一起显示的黄色和红色弧线，以说明不同之处：

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

二次贝塞尔曲线

还可以使用<path>元素绘制二次Bezier曲线。 绘制二次Bezier曲线是使用Q和Q命令完成的。 与直线一样，大写命令(Q)使用绝对坐标作为其终点，而小写命令(q)使用相对坐标(相对于起点)。 下面是一个简单的二次曲线示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 Q50,100 100,100" 
      style="stroke: #006666; fill:none;"/></svg>

运行后结果如下:

该示例绘制一条二次 Bezier 曲线，从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-大写和小写闭合路径命令之间没有区别）:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 L100,50 L100,100 Z"
    style="stroke: #006666; fill:none;"/></svg>

运行后结果如下:

组合命令

可以在同一<path>元素中组合path命令。下面是一个实例：

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

此示例绘制一条直线、一条圆弧、一条二次Bezier曲线，并以一条回到起点的直线闭合路径结束。 以下是生成的图像：

填充路径

可以使用fill CSS属性填充路径。下面是一个实例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M100,100 L150,100 L150,150  Z"
      style="stroke: #0000cc;
             stroke-width: 2px;             fill  : #ccccff;"/></svg>

运行后结果如下:

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

标记

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

符号快捷方式

如果您需要一次又一次使用同一条命令，则可以省略该命令字母，而只需提供一组额外的参数即可，就像该命令在那里一样。这是一个示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10,10   l100,0  0,50  -100,0  0,-50"
      style="stroke: #000000; fill:none;" /></svg>

此示例说明如何将其他参数传递给l命令，就好像每个参数对前面都有一个l一样。 这也适用于其他路径命令。 以下是生成的图像：

Path 命令大全

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