请解释SVG路径命令和坐标

Question

在 SVG 文件中，我找到了一个如下所示的路径：

<path id="kvg:0548b-s7" kvg:type="?b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/>

有人可以解释一下坐标48.38c5.65-0.95和18.92-3.42c2.05-0.45代表什么吗？

Answer 1

我认为一些混淆来自格式允许将单个参数分离到各种路径操作数的技巧。所以在例子中：

M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13

你看参数

• 用逗号分隔，如 M(ove)65.32,48.38 ...
• 由连字符（减号）分隔，如 c(ubic bezier)2.05-0.45 ...
• 由新操作数分隔，如 ...48.38c5.65...
• 您还会看到由空格而不是逗号分隔的参数
• 如果前面的参数中有句点，您甚至可能会看到由前导句点分隔的参数
• 有时您会看到以科学记数法表示的参数，如 3.22e-9 以消除零

由于每种操作数都需要一定数量的参数（M、L、T需要2个；H、V需要1个；Q、S需要4个；C需要6个；A需要7个；Z需要0个）你会看到情况其中操作数被省略。如果您看到后面有 4 个参数的 L，则实际上表示 2 行，后面有 18 个参数的 C 表示 3 个三次贝塞尔曲线。

这一切都是为了最大限度地减少 SVG 中浪费的空间，而不仅仅是让它难以阅读。