解释SVG文件中的路径

Question

我已经使用包含三条路径的Inkscape生成了一个普通的svg文件。考虑下面

<path xmlns="http://www.w3.org/2000/svg" 
     d="m 128.57143,243.79075 
      -2.85714,568.57143 
      474.28571,0 
      -31.42857,-611.42857 z" id="path2985" 
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/> 

给出的.svg文件中的路径之一，我要分析此SVG文件提取该封闭路径的XY坐标（这是因为“Z”的收的结束坐标列表）。

我不确定如何解释8位数字。据我所知，m 128.57143,243.79075表示的前两个数字表示路径的原点在屏幕左上方的屏幕坐标（不是笛卡尔！）128.57143的右边和243.79075。

那6个数字的其余部分呢？它们是否指示相对于前一点移动的向量？或者只是绝对的屏幕坐标？

如SVG文档here所示，SVG文件通常在每个连续的数字对前加上M，L，H，...字母，告诉矢量图形查看器如何在绘制该路径时解释该数字对。

但是，在这种情况下，除了前缀为beginnnig的m和末尾的z之间没有这样的字母。这种情况下的默认行为是什么？

Answer 1

大写字母M表示绝对coördinates。而小米意味着相对coördinates。由于默认定位为0,0，因此m的第一个值与M相同。

只有第一个参数被视为'm'（= moveto）。下一个被视为'l'（= lineto）。由于'm'未被大写，下一个coördinate将被视为相对。

这将是一样的：

<path xmlns="http://www.w3.org/2000/svg" 
     d="m 128.57143,243.79075 
      l-2.85714,568.57143 
      474.28571,0 
      -31.42857,-611.42857 z" id="path2985" 
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/> 

为了参考起见：这是关于对moveTo命令规范审计机关。 （来源：https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands）

在给定的（x，y）坐标处开始一个新的子路径。 M（大写） 表示将出现绝对坐标; m（小写） 表示将会出现相对坐标。如果moveto为 后跟多对坐标，则后续对将 视为隐式lineto命令。因此，如果moveto是相对的，则隐含的lineto命令 将是相对的，而如果移动到绝对的，则隐含的lineto命令将是相对的。如果相对移动到（m）作为路径的第一个元素出现，则将其视为一对绝对坐标。在 这种情况下，即使最初的moveto被解释为绝对moveto，随后的坐标对也被视为相对的 。