SVG 路径中的“M”、“c”和“z”是什么意思?

Ave*_*ery 3 svg pathelement paperjs

http://paperjs.org/examples/

我正在尝试使用 Chain 创建自定义路径,我看到 Tadpoles 有一个预定义的心形路径,所以我试图复制它,但我不明白其中的一些部分。

VAR = heartPath新路径('M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719, 64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498,24.0498 -23.82422,49.2492,49.24022,49.249.59.249.57

我不明白路径开头的M是什么意思,或者某些值中的c或路径末尾的z是什么意思。我试图在他们的文档或谷歌中找到有关它的信息,但我找不到我想要的东西,因为单个字母使搜索变得困难。

我试图在开始时移除M并且蝌蚪停止移动,所以我认为 M 可能意味着“移动”?删除c会改变心脏的形状,但删除z似乎没有任何改变。

Bam*_*ieh 11

M:移至

命令“移动到”或 M,在上面已经描述过。它需要两个参数,坐标“ x ”和坐标“ y ”移动到。如果您的光标已经在页面上的某个位置,则不会绘制连接这两个位置的线。“移动到”命令出现在路径的开头,以指定绘图的开始位置

z:关闭路径

此命令从当前位置绘制一条直线回到路径的第一个点。它通常放置在路径节点的末尾,但并非总是如此。大写和小写命令之间没有区别。

c:贝塞尔曲线

三次曲线 C 是稍微复杂的曲线。三次贝塞尔曲线为每个点取两个控制点。因此,要创建三次贝塞尔曲线,您需要指定三组坐标。

来源:https : //developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths

-编辑-

您可以访问https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d以获取所有可能命令及其用法的完整参考。


sky*_*ack -3

您调用的构造函数是这样的

Path(, pathData)
Run Code Online (Sandbox Code Playgroud)

其中pathData描述为:

描述该路径几何形状的 SVG 路径数据

您应该阅读的文档是 SVG 文档。
正如 @GerardoFurtado 在评论中提到的,这里有一篇您可能感兴趣的文章。