SVG 路径 <path>

SVG 中的 <path> 元素用于创建路径，它是 SVG 中最强大和最灵活的基本形状之一。

使用 <path> 元素可以绘制直线、曲线、弧线等各种复杂的图形，并且可以通过设置路径命令来控制路径的形状和样式。

基本语法

<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

属性解析：

• d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。

• fill 属性定义了路径的填充颜色。

• stroke 属性定义了路径的描边颜色。

• stroke-width 属性定义了路径的描边宽度。

以下代码绘制了一个橙色填充、黑色描边、宽度为 2 像素的路径，其路径数据为移动到 (50, 50)，然后依次连接到 (150, 50) 和 (100, 150)，最后闭合路径。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

实例 1

上面的例子定义了一条路径，它开始于位置 150 0，到达位置 75 200，然后从那里开始到 225 200，最后在 150 0 关闭路径。

下面是SVG代码：

点击查看：查看 SVG 文件。

实例 2

下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：

下面是SVG代码：

点击查看：查看 SVG 文件。

注意事项

• <path> 元素的路径数据是 SVG 中最复杂的部分，需要一定的学习和实践才能熟练掌握各种路径命令的使用方式。

• 路径数据可以包含多个路径命令，每个路径命令都可以有不同的参数来控制路径的形状和方向。

通过使用 <path> 元素，你可以在 SVG 中绘制各种复杂的图形和路径，并通过设置属性来控制路径的外观和样式。