Snap.svg教程中使用的奇怪的SVG路径语法?

时间:2014-08-18 04:36:08

标签: svg snap.svg

在查看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 ...

1 个答案:

答案 0 :(得分:4)

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

线索是命令:Mmoveto命令,它通常不会绘制任何东西。但是,如果您查看the spec,则会注意到以下内容:

  

如果一个moveto后跟多对坐标,那么   后续对被视为隐式lineto命令。

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

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

我认为要带走的关键是SVG路径确实不需要空格或逗号,除非没有它们,数字会模糊不清。

相关问题