SVG路径c命令坐标读取疑问：为何部分坐标非XY点形式

你遇到的问题本质是SVG路径语法的坐标分隔规则，以及c命令的多段连续绘制特性，下面逐一拆解：

1. 先明确c命令的基础语法 #

c是相对坐标的三次贝塞尔曲线命令，单个曲线段的格式是：

c dx1,dy1 dx2,dy2 dx,dy

• dx1,dy1：第一个控制点相对于当前起点的X/Y偏移
• dx2,dy2：第二个控制点相对于当前起点的X/Y偏移
• dx,dy：曲线终点相对于当前起点的X/Y偏移

关键：c命令支持连续绘制多个三次贝塞尔曲线段，后续每个段同样需要完整的6个数值（3组XY偏移对），自动以上一段的终点作为下一段的起点。

2. 示例1的拆分逻辑 #

示例1的代码：

d="M151.5,85.5c0-36.48,29.52-66,66-66"

这里的c后面是单个曲线段，SVG允许用正负号代替逗号/空格分隔坐标，拆分后是：

c 0,-36.48 29.52,-66 66,-66

对应三组标准XY对：(0,-36.48)、(29.52,-66)、(66,-66)，和你理解的一致。

3. 示例2的拆分逻辑（核心困惑点） #

示例2的代码：

d="M4.35,174.28c4.16,0,8.33,.18,12.48-.04,6.26-.33,10.82-2.3,12.19-8.61,1.27-5.85-.81-12.77-9.08-14.09-5.23-.84-10.55-.11-16.07-.37"

这里的c后面是4个连续的三次贝塞尔曲线段，总共有24个数值（24÷6=4）。SVG的坐标拆分规则是：只要数值的正负号能区分开，就可以省略逗号或空格。比如：

• 12.48-.04 → 拆分为12.48, -0.04（负号表示下一个是独立的负数坐标）
• 6.26-.33 → 拆分为6.26, -0.33
• 10.82-2.3 → 拆分为10.82, -2.3

按顺序拆分后，每6个数值为一段，都是标准的dx1,dy1 dx2,dy2 dx,dy格式：
第1段：4.16,0 8.33,.18 12.48,-.04
第2段：6.26,-.33 10.82,-2.3 12.19,-8.61
第3段：1.27,-5.85 -.81,-12.77 -9.08,-14.09
第4段：-5.23,-.84 -10.55,-.11 -16.07,-.37

只是因为省略了部分逗号，看起来像是“非XY点”，实际上所有数值都是成对的X/Y偏移。

总结 #

SVG路径语法非常灵活，核心要记住：

• c命令每个曲线段需要6个数值（3组XY对）
• 连续多个曲线段总数值数必须是6的倍数
• 正负号可作为坐标分隔标识，代替逗号或空格

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