SVG 路径

<path> 是 SVG 中最强大的元素，可以绘制任意形状，包括直线、曲线、弧线等。

基本语法

<svg width="200" height="100">
  <path d="M10,50 L100,50 L100,90" fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>

主要属性

属性	描述
d	路径数据，定义绘制指令
fill	填充颜色
stroke	描边颜色
stroke-width	描边宽度

路径命令

基础命令

命令	名称	参数	描述
M	moveto	x,y	移动到指定点（起点）
L	lineto	x,y	画直线到指定点
H	horizontal lineto	x	画水平线
V	vertical lineto	y	画垂直线
Z	closepath	无	闭合路径

大小写区别

• 大写字母：使用绝对坐标
• 小写字母：使用相对坐标（相对于当前点）

直线示例

<svg width="300" height="150">
  <!-- 使用 M 和 L -->
  <path d="M20,20 L100,20 L100,100 L20,100 Z" 
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="2"/>
  
  <!-- 使用 H 和 V -->
  <path d="M140,20 H220 V100 H140 Z" 
        fill="#bbf7d0" stroke="#22c55e" stroke-width="2"/>
  
  <!-- 使用相对坐标 -->
  <path d="M260,20 l80,0 l0,80 l-80,0 z" 
        fill="#fecaca" stroke="#ef4444" stroke-width="2"/>
</svg>

曲线命令

贝塞尔曲线

命令	名称	参数	描述
C	curveto	x1,y1 x2,y2 x,y	三次贝塞尔曲线
S	smooth curveto	x2,y2 x,y	平滑三次贝塞尔曲线
Q	quadratic curveto	x1,y1 x,y	二次贝塞尔曲线
T	smooth quadratic	x,y	平滑二次贝塞尔曲线

三次贝塞尔曲线 (C)

<svg width="300" height="150">
  <!-- C x1,y1 x2,y2 x,y -->
  <path d="M20,100 C20,20 150,20 150,100" 
        fill="none" stroke="#3b82f6" stroke-width="3"/>
  
  <!-- 显示控制点 -->
  <circle cx="20" cy="100" r="4" fill="#ef4444"/>
  <circle cx="20" cy="20" r="4" fill="#22c55e"/>
  <circle cx="150" cy="20" r="4" fill="#22c55e"/>
  <circle cx="150" cy="100" r="4" fill="#ef4444"/>
  <line x1="20" y1="100" x2="20" y2="20" stroke="#ccc" stroke-dasharray="3"/>
  <line x1="150" y1="100" x2="150" y2="20" stroke="#ccc" stroke-dasharray="3"/>
</svg>

二次贝塞尔曲线 (Q)

<svg width="300" height="150">
  <!-- Q x1,y1 x,y -->
  <path d="M20,100 Q100,20 180,100" 
        fill="none" stroke="#8b5cf6" stroke-width="3"/>
  
  <!-- 控制点 -->
  <circle cx="20" cy="100" r="4" fill="#ef4444"/>
  <circle cx="100" cy="20" r="4" fill="#22c55e"/>
  <circle cx="180" cy="100" r="4" fill="#ef4444"/>
  <line x1="20" y1="100" x2="100" y2="20" stroke="#ccc" stroke-dasharray="3"/>
  <line x1="100" y1="20" x2="180" y2="100" stroke="#ccc" stroke-dasharray="3"/>
</svg>

弧线命令

命令	参数	描述
A	rx,ry rotation large-arc sweep x,y	绘制弧线

参数说明：

• rx, ry：椭圆的 x 和 y 半径
• rotation：椭圆旋转角度
• large-arc：0=小弧，1=大弧
• sweep：0=逆时针，1=顺时针
• x, y：终点坐标

<svg width="400" height="200">
  <!-- 小弧 + 顺时针 -->
  <path d="M50,100 A50,50 0 0,1 150,100" 
        fill="none" stroke="#3b82f6" stroke-width="3"/>
  <text x="100" y="130" text-anchor="middle" font-size="11">0,1</text>
  
  <!-- 大弧 + 顺时针 -->
  <path d="M200,100 A50,50 0 1,1 300,100" 
        fill="none" stroke="#22c55e" stroke-width="3"/>
  <text x="250" y="130" text-anchor="middle" font-size="11">1,1</text>
  
  <!-- 小弧 + 逆时针 -->
  <path d="M50,180 A50,50 0 0,0 150,180" 
        fill="none" stroke="#f59e0b" stroke-width="3"/>
  <text x="100" y="210" text-anchor="middle" font-size="11">0,0</text>
  
  <!-- 大弧 + 逆时针 -->
  <path d="M200,180 A50,50 0 1,0 300,180" 
        fill="none" stroke="#ef4444" stroke-width="3"/>
  <text x="250" y="210" text-anchor="middle" font-size="11">1,0</text>
</svg>

使用 CSS 样式

<style>
  .path-draw {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 2s ease forwards;
  }
  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="200" height="100">
  <path class="path-draw" d="M20,80 Q100,10 180,80" 
        fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

实际应用示例

心形

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M50,30 C50,20 40,10 25,10 C10,10 0,25 0,40 C0,60 50,90 50,90 C50,90 100,60 100,40 C100,25 90,10 75,10 C60,10 50,20 50,30 Z" 
        fill="#ef4444"/>
</svg>

波浪线

<svg width="400" height="80">
  <path d="M0,40 Q25,10 50,40 T100,40 T150,40 T200,40 T250,40 T300,40 T350,40 T400,40" 
        fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

圆角矩形（自定义圆角）

<svg width="200" height="100">
  <path d="M30,10 H170 Q190,10 190,30 V70 Q190,90 170,90 H30 Q10,90 10,70 V30 Q10,10 30,10 Z" 
        fill="#3b82f6"/>
</svg>

语音气泡

<svg width="200" height="150">
  <path d="M20,20 H160 Q180,20 180,40 V80 Q180,100 160,100 H60 L40,130 L50,100 H20 Q0,100 0,80 V40 Q0,20 20,20 Z" 
        fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/>
</svg>

饼图扇形

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 第一个扇形（40%） -->
  <path d="M100,100 L100,20 A80,80 0 0,1 176,140 Z" fill="#3b82f6"/>
  <!-- 第二个扇形（35%） -->
  <path d="M100,100 L176,140 A80,80 0 0,1 24,140 Z" fill="#22c55e"/>
  <!-- 第三个扇形（25%） -->
  <path d="M100,100 L24,140 A80,80 0 0,1 100,20 Z" fill="#f59e0b"/>
</svg>

复杂图标 - 房子

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- 屋顶 -->
  <path d="M50,10 L90,45 L10,45 Z" fill="#ef4444"/>
  <!-- 房身 -->
  <path d="M20,45 L20,85 L80,85 L80,45" fill="#f59e0b"/>
  <!-- 门 -->
  <path d="M40,85 L40,60 L60,60 L60,85" fill="#78350f"/>
  <!-- 窗户 -->
  <path d="M25,55 L25,70 L35,70 L35,55 Z" fill="#bfdbfe"/>
  <path d="M65,55 L65,70 L75,70 L75,55 Z" fill="#bfdbfe"/>
</svg>

对勾动画

<style>
  .check-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck 0.5s ease forwards;
  }
  @keyframes drawCheck {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="60" height="60">
  <circle cx="30" cy="30" r="28" fill="#22c55e"/>
  <path class="check-path" d="M15,30 L25,40 L45,20" 
        fill="none" stroke="white" stroke-width="4" 
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>

下一步

学会了路径，接下来让我们学习 SVG 文本 的使用！