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 xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>

尝试一下 »

点击查看:查看 SVG 文件

实例 2

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

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg>

尝试一下 »

点击查看:查看 SVG 文件

注意事项

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

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

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