SVG 中的路径使用 <path> 元素来定义,通过 d 属性指定路径数据。路径数据是由一系列命令和参数组成的字符串。以下是一个简单的SVG路径的例子:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" stroke-width="2" />
</svg>

在这个例子中,路径数据是 "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"。解释如下:

  •  M 表示移动到指定坐标,后面的两个数字是起始点的 x 和 y 坐标。

  •  C 表示三次贝塞尔曲线,后面的六个数字依次是两个控制点和终点的坐标。

  •  S 表示光滑曲线,后面的四个数字依次是一个控制点和终点的坐标。


其他常见的路径命令还包括直线 (L)、水平线 (H)、垂直线 (V) 等。

在上述例子中,路径被用于创建一条弯曲的曲线,并用黑色边框进行描边。这个曲线起始于 (10, 80),经过两个控制点,终止于 (180, 80)。路径的填充颜色设置为 none,表示不填充。

你可以根据需要调整路径数据以及添加其他属性,以满足你的具体设计要求。 SVG 的路径元素允许你创建各种各样的复杂图形。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12384/SVG