SVG路径d属性中S/s、C/c、Q/q命令的区别是什么？

核心差异总述 #

SVG路径中所有命令的大小写本质区别仅在于坐标参考系：

• 大写命令（C/S/Q）：后续所有坐标参数都是绝对坐标，以SVG画布左上角(0,0)为基准定位
• 小写命令（c/s/q）：后续所有坐标参数都是相对坐标，以上一个路径点的终点为基准，计算x、y方向的偏移量

1. 三次贝塞尔曲线命令 C vs c #

• 作用：定义完整的三次贝塞尔曲线，需要2个控制点+1个终点，共3组坐标参数
• 语法差异：
  • 绝对写法：C x1 y1, x2 y2, x y，其中x1/y1是起点控制点绝对坐标，x2/y2是终点控制点绝对坐标，x/y是曲线终点绝对坐标
  • 相对写法：c dx1 dy1, dx2 dy2, dx dy，其中dx1/dy1是起点控制点相对于上一个路径终点的偏移量，dx2/dy2是终点控制点偏移量，dx/dy是曲线终点相对于上一个点的偏移量
• 可视化示例代码（复制可直接运行查看效果）：

<svg width="400" height="150" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg">
  <!-- 大写C绝对坐标：红色曲线，起点(20,80) -->
  <path d="M 20 80 C 50 20, 150 20, 180 80" stroke="red" fill="none" stroke-width="2"/>
  <!-- 小写c相对坐标：蓝色曲线，起点(220,80)，形状和红色完全一致 -->
  <path d="M 220 80 c 30 -60, 130 -60, 160 0" stroke="blue" fill="none" stroke-width="2"/>
</svg>

2. 平滑三次贝塞尔曲线命令 S vs s #

• 作用：是C/c的简写，用于连续绘制平滑衔接的三次贝塞尔曲线，第一个控制点会自动取上一段曲线终点控制点的对称点，仅需要传入1个终点控制点+1个终点，共2组坐标参数
• 语法差异：
  • 绝对写法：S x2 y2, x y
  • 相对写法：s dx2 dy2, dx dy
• 注意：S/s必须紧跟在另一个C/c/S/s之后使用，否则第一个控制点会和当前起点重合，退化为二次贝塞尔曲线效果。

3. 二次贝塞尔曲线命令 Q vs q #

• 作用：定义二次贝塞尔曲线，需要1个控制点+1个终点，共2组坐标参数
• 语法差异：
  • 绝对写法：Q x1 y1, x y，其中x1/y1是控制点绝对坐标，x/y是终点绝对坐标
  • 相对写法：q dx1 dy1, dx dy，其中dx1/dy1是控制点相对于上一个路径终点的偏移量，dx/dy是终点偏移量
• 可视化示例代码（复制可直接运行查看效果）：

<svg width="400" height="150" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg">
  <!-- 大写Q绝对坐标：绿色曲线，起点(20,80) -->
  <path d="M 20 80 Q 100 20, 180 80" stroke="green" fill="none" stroke-width="2"/>
  <!-- 小写q相对坐标：紫色曲线，起点(220,80)，形状和绿色完全一致 -->
  <path d="M 220 80 q 80 -60, 160 0" stroke="purple" fill="none" stroke-width="2"/>
</svg>

内容的提问来源于stack exchange，提问作者Beetran Dahiya