Snap.svg教程中使用了奇怪的SVG path语法？

Question

在浏览Snap.svg tutorial时，我遇到了下面这行代码，这让我吃了一惊：

// Now lets create pattern
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15")

什么是M10-5-10,15？起初，我认为它可能是某种坐标范围语法，但在本例中这并没有多大意义，而且我在SVG path spec中找不到任何与此相似的语法。我在Snap.svg docs中也找不到任何值得注意的东西。

有趣的是，这些代码看起来确实像是draw the desired pattern...

Answer 1

simplest answer通常是正确的。没有特殊的语法-坐标只是连接在一起，没有空格。

线索是命令：M是moveto命令，它通常不会绘制任何内容。但是，如果您查看the spec，您将注意到以下内容：

如果一个moveto后面跟着多对坐标，则后续的坐标对将被视为隐式lineto命令。

因此，一个命令实际上可以有多个坐标对，第一个坐标对之后的任何内容都被视为lineto命令。实际上，神秘的语法只是编写M10,-5 -10,15 M15,0 0,15 M0,-5 -20,15的一种简洁(但可读性较差)的方式，连字符是负号。

简单地查看SVG path grammar也可以清楚地表明，moveto的参数是坐标对，而坐标是简单的数字。

我认为关键的一点是SVG路径实际上并不需要空格或逗号，除非没有它们的数字是不明确的。