SVG 路径

SVG 元素

SVG 的元素

<path> 元素是 SVG 中最强大和通用的形状元素。通过定义一系列绘图命令，它可以用于绘制直线、曲线、圆弧以及更复杂的形状。

<path> 元素的形状由其 d 属性定义，该属性包含一系列路径数据命令：

M (moveto): M x y 或 m dx dy - 在给定的 (x,y) 坐标处开始一个新的子路径。可以想象成抬起笔移动到新的位置。
L (lineto): L x y 或 l dx dy - 从当前点向新的 (x,y) 坐标绘制一条直线。
H (horizontal lineto): H x 或 h dx - 从当前点向 x 坐标绘制一条水平线。
V (vertical lineto): V y 或 v dy - 从当前点向 y 坐标绘制一条垂直线。
C (curveto): C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy - 从当前点绘制一条三次贝塞尔曲线到 (x,y)，使用 (x1,y1) 作为曲线起点的控制点，使用 (x2,y2) 作为曲线终点的控制点。
S (smooth curveto): S x2 y2, x y 或 s dx2 dy2, dx dy - 绘制一条平滑的三次贝塞尔曲线。它假定第一个控制点是前一个 ‘C’ 或 ‘S’ 命令的最后一个控制点的反射。
Q (quadratic Bézier curve): Q x1 y1, x y 或 q dx1 dy1, dx dy - 从当前点绘制一条二次贝塞尔曲线到 (x,y)，使用 (x1,y1) 作为控制点。
T (smooth quadratic Bézier curveto): T x y 或 t dx dy - 绘制一条平滑的二次贝塞尔曲线。它假定控制点是前一个 ‘Q’ 或 ‘T’ 命令的控制点的反射。
A (elliptical Arc): A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy - 绘制一个椭圆弧。
Z (closepath): Z 或 z - 通过从当前点到当前子路径的起始点绘制一条直线来闭合当前子路径。

**注意：**大写命令（例如，M, L）使用绝对坐标，而小写命令（例如，m, l）使用相对坐标（相对于当前点）。

示例 1：绘制一个三角形

这个示例定义了一个路径，它从位置 (150,0) 开始，画一条线到 (75,200)，然后从那里画一条线到 (225,200)，最后通过画一条线回到起始点 (150,0) 来闭合路径，形成一个三角形。

抱歉，您的浏览器不支持内联 SVG。

下面是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Path Triangle</title>
</head>
<body>
  <svg width="300" height="210">
    <path d="M150 0 L75 200 L225 200 Z" fill="orange" stroke="black" stroke-width="2" />
  </svg>
</body>
</html>

示例 2：二次贝塞尔曲线

贝塞尔曲线用于建模平滑、可缩放的曲线。二次贝塞尔曲线由一个起始点、一个结束点和一个确定曲线形状的控制点定义。

以下示例创建一个二次贝塞尔曲线，其中 A (100,350) 和 C (400,350) 是起始点和结束点，B (250,50) 是控制点。包含辅助线和点用于可视化。

A B C