SVG 路径

梗概

SVG 路径（path）是用来定义矢量图形中复杂形状和轮廓的关键元素。它使用 d 属性来描述路径的绘制方法。路径是由一系列命令和参数组成的，这些命令控制路径的形状和绘制方式。

常用的路径命令

1. M (moveto)
   移动到指定位置，不绘制线段。
   语法: M x y 或 m dx dy（相对坐标）。

2. L (lineto)
   从当前位置绘制直线到指定位置。
   语法: L x y 或 l dx dy（相对坐标）。

3. H (horizontal lineto)
   绘制水平线。
   语法: H x 或 h dx（相对坐标）。

4. V (vertical lineto)
   绘制垂直线。
   语法: V y 或 v dy（相对坐标）。

5. C (cubic Bézier curve)
   绘制三阶贝塞尔曲线。 语法: C x1 y1, x2 y2, x y
   （x1, y1 是第一个控制点，x2, y2 是第二个控制点，x, y 是终点）。

6. S (smooth cubic Bézier curve)
   绘制平滑的三次贝塞尔曲线。第一个控制点自动计算。
   语法: S x2 y2, x y

7. Q (quadratic Bézier curve)
   绘制二次贝塞尔曲线。
   语法: Q x1 y1, x y
   （x1, y1 是控制点，x, y 是终点）。

8. T (smooth quadratic Bézier curve)
   绘制平滑的二次贝塞尔曲线。控制点自动计算。
   语法: T x y

9. A (arc)
   绘制椭圆弧线。
   语法: A rx ry x-axis-rotation large-arc-flag sweep-flag x y

   • rx ry: 椭圆的半径。
   • x-axis-rotation: 椭圆的旋转角度。
   • large-arc-flag: 是否绘制大弧线（1 或 0）。
   • sweep-flag: 弧线的方向（1 表示顺时针，0 表示逆时针）。
   • x y: 终点坐标。

10. Z (closepath)
    关闭路径，即从当前位置连接到起始点。
    语法: Z 或 z

示例

之一

下面是一个简单的SVG路径示例：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 L 50 90 Z" fill="none" stroke="black"/>
</svg>

在上面的示例中，我们使用了M、L和Z命令来定义一个三角形。首先使用M命令将笔触移动到(10,10)位置，然后使用L命令画一条直线到(90,10)位置，再画一条直线到(50,90)位置，最后使用Z命令闭合路径。

之一

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用路径绘制三角形 -->
  <path d="M 10 10 L 190 10 L 100 190 Z" fill="none" stroke="black"/>
  
  <!-- 使用贝塞尔曲线绘制 -->
  <path d="M 50 50 C 150 10, 150 190, 50 150" fill="none" stroke="blue"/>
  
  <!-- 绘制一个椭圆弧 -->
  <path d="M 50 150 A 50 50 0 1 1 150 150" fill="none" stroke="red"/>
</svg>

注意事项

• 命令中的大小写代表绝对坐标（大写）和相对坐标（小写）。
• d 属性可以组合多个命令，路径会按照顺序执行。