请解释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贝塞尔）2.05-0.45 ...
• 通过分隔新的操作数，如... 48.38c5.65 ...
• ，你还可以看到用空格代替逗号分隔参数
• 你甚至可以看到一个领先的句点分隔，如果前面的参数在它
• 过一段有时你会看到在科学记数法参数参数在3.22e-9中消除零点

由于每种操作数都需要一定数量的参数（M，L，T需要2; H，V需要1; Q，S需要4; C需要6;需求7; Z需要0）你会看到操作数被忽略的情况。如果你看到后面有4个参数的L，它实际上意味着2行，C后面有18个参数，这意味着3立方贝塞尔。

这是为了最大限度地减少SVG中的浪费空间，而不仅仅是为了使其难以阅读。

Answer 2

SVG的<path>标记的d属性包含一系列处理指令或描述，以创建SVG的整体形状。这些指令可以是不同的类型：

1. MOVETO ::重启路径别的地方（M或m语法）
2. 的LineTo ::画一条直线（L或l语法，或H和V，或h和v）
3. Curveto ::绘制三次Bezier曲线（C或c语法）
4. 包含arcTo ::绘制的椭圆曲线（A或a语法）
5. ClosePath ::画一条直线的路径（Z或z语法）

的开口点

大写字母语法表示给出绝对位置值。小写语法表示相对位置值，即，后续坐标从当前控制点向下和向右找到。

您的SVG的d属性中提供的说明以大写字母M开头，该大写字母表示Moveto命令的绝对位置值。但是也存在小写的c命令，其表示Curveto指令集的相对值。

关于第一个坐标则是问有关...

Moveto命令有两个参数。在您要查询的第一个值的第一个段中，48.38是命令的轴参数y（其跟随x参数65.32）。其余的c5.65-0.95是新的Curveto指令集的开始。

Curveto命令有三个参数，由x和y对组成，每个对由短划线（-）分隔开。由于它以小写字母c给出，因此后面的值是相对的。第一对是开始曲线的控制点，第二对是结束曲线的控制点，第三对是定义曲线开始的当前点的坐标。

关于您询问的第二组坐标...

的18.92-3.42是由第一Curveto命令定义的当前点（第三个参数），并且c2.05-0.45是下一Curveto命令的第一个参数，其控制贝塞尔曲线的起点。

这些值中的点是小数点。

如果按d属性将其拆分，根据文档中定义的参数个数，每条命令的指令集将变为much more readable。

有关d属性的更多信息，请参阅see here和here。

有关贝塞尔曲线的更多信息，see here。