<path> 是SVG中最强大的图形元素之一，它允许你使用一组复杂的命令绘制任意形状的路径。通过路径数据，<path> 可以描述直线、曲线、圆弧、弯曲线等各种复杂图形。相比其他SVG图形元素，<path> 是唯一一个能够绘制复杂自由形状的元素。

目录

  1. 基本语法
  2. 路径命令详解
  3. 示例代码
  4. 参考资料
  5. 出站链接

基本语法

<path d="命令" fill="填充颜色" stroke="描边颜色" stroke-width="描边宽度" />
  • d：定义路径数据，是一个由命令和坐标组成的字符串，指示如何绘制图形。
  • fill：填充颜色（如果适用），用来设置图形内部的填充颜色。
  • stroke：路径的边框颜色，控制路径的边框颜色。
  • stroke-width：路径的边框宽度，单位为像素。

路径命令详解

路径数据d属性使用一系列命令和坐标。每个命令指定如何绘制路径的一部分。常用的路径命令包括：

  1. M (moveTo)：
    • 该命令用于将“画笔”移到指定的坐标，不画出路径。
    • 例如：M 10,10 将画笔移至(10,10)点。
  2. L (lineTo)：
    • 该命令用于从当前位置绘制直线到指定的坐标。
    • 例如：L 20,20 从当前位置绘制一条直线到(20,20)。
  3. H (horizontal lineTo)：
    • 该命令用于绘制一条水平线到指定的X坐标，Y坐标保持不变。
    • 例如：H 30 绘制一条水平线到X坐标为30的点。
  4. V (vertical lineTo)：
    • 该命令用于绘制一条垂直线到指定的Y坐标，X坐标保持不变。
    • 例如：V 40 绘制一条垂直线到Y坐标为40的点。
  5. C (cubic Bezier curveTo)：
    • 该命令用于绘制一条三次贝塞尔曲线，指定两个控制点和终点。
    • 例如：C 20,20 40,20 60,40 绘制三次贝塞尔曲线，控制点为(20,20)和(40,20)，终点为(60,40)。
  6. S (smooth cubic Bézier curveTo)：
    • 该命令用于绘制一条平滑的三次贝塞尔曲线，前一个控制点会被自动推算。
    • 例如：S 80,80 100,100 绘制一条平滑的三次贝塞尔曲线，终点为(100,100)，控制点为(80,80)。
  7. Q (quadratic Bezier curveTo)：
    • 该命令用于绘制一条二次贝塞尔曲线，指定一个控制点和终点。
    • 例如：Q 20,20 40,40 绘制二次贝塞尔曲线，控制点为(20,20)，终点为(40,40)。
  8. T (smooth quadratic Bézier curveTo)：
    • 该命令用于绘制一条平滑的二次贝塞尔曲线。
    • 例如：T 50,50 绘制平滑的二次贝塞尔曲线，终点为(50,50)。
  9. A (elliptical Arc)：
    • 该命令用于绘制圆弧，指定椭圆的半径、旋转角度、方向标志和弧的大小。
    • 例如：A 10 10 0 0 1 50 50 绘制一个圆弧，半径为(10,10)，旋转角度为0，方向标志为0，终点为(50,50)。
  10. Z (closePath)：
    • 该命令用于关闭路径，连接当前点与路径的起点，形成一个封闭图形。

示例代码

  1. 简单直线
<svg width="200" height="200">
  <path d="M 10,10 L 100,100 L 200,50" fill="none" stroke="black" stroke-width="2" />
</svg>
  • 这个例子绘制了两条连接在一起的直线。路径起始点是(10,10)，然后绘制到(100,100)和(200,50)，没有填充，边框为黑色，宽度为2像素。
  1. 贝塞尔曲线
<svg width="200" height="200">
  <path d="M 10,80 C 40,10 65,10 95,80 S 150,150 180,80" fill="none" stroke="blue" stroke-width="3" />
</svg>
  • 这个例子绘制了一个三次贝塞尔曲线和一个平滑的贝塞尔曲线，边框为蓝色，宽度为3像素。
  1. 二次贝塞尔曲线
<svg width="200" height="200">
  <path d="M 10,80 Q 50,10 90,80 T 170,80" fill="none" stroke="red" stroke-width="2" />
</svg>
  • 这个例子绘制了一个二次贝塞尔曲线和一个平滑的二次贝塞尔曲线，边框为红色，宽度为2像素。
  1. 圆弧
<svg width="200" height="200">
  <path d="M 10,80 A 30,30 0 0,1 80,80" fill="none" stroke="green" stroke-width="2" />
</svg>
  • 这个例子绘制了一个从(10,80)到(80,80)的圆弧，半径为(30,30)，边框为绿色，宽度为2像素。
  1. 封闭路径
<svg width="200" height="200">
  <path d="M 10,10 L 100,100 L 200,50 Z" fill="yellow" stroke="black" stroke-width="2" />
</svg>
  • 这个例子绘制了一个封闭的路径，三条边连接起来形成一个三角形，填充颜色为黄色，边框为黑色，宽度为2像素。
  1. 复杂路径（心形）
<svg width="200" height="200">
  <path d="M 10,80 C 20,10 80,10 80,40 C 80,70 40,90 10,80 Z" fill="pink" stroke="black" stroke-width="2" />
</svg>
  • 这个例子绘制了一个心形，路径使用了二次贝塞尔曲线和三次贝塞尔曲线，填充颜色为粉色，边框为黑色，宽度为2像素。

参考资料

出站链接

<path> 是SVG图形中最灵活、最强大的元素，它能够通过路径命令实现复杂的形状绘制。无论是直线、曲线、圆弧，还是复杂的自由形状，都可以通过路径数据精确地控制。它在网页设计、图标设计、动画和交互效果中应用广泛，是创建矢量图形的核心工具之一。