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



http://paperjs.org/examples/

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

var heartPath=新路径('M514.696296247.0313c-7.10205,-27.02441-17.2373,-52.39453-30.40576,-761059c-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-46.99727,-13.39893-7.04297,-26.97021-7.04299,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-6390381c16.94775,-17.17871 37.90527,-25。76758 62.87354,-2576758c25.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.0924c19.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,7.78271c-37.56738,47.41211-64.93457,86.35352-82.11328116.8125c-13.51758,24.0498-23.82422,49.24902-30.9209,75.58594z'(;

我不明白路径开始处的M,或某些值中的c或路径结束处的z是什么意思。我试着在他们的文档或谷歌上找到关于它的信息,但我找不到我想要的,因为单个字母会让搜索变得困难。

一开始我试图删除M,但蝌蚪停止了移动,所以我认为M可能意味着"移动"?去除c会改变心脏的形状,但去除z似乎不会改变任何东西。

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以获取所有可能的命令及其用法的完整参考。

您正在调用的构造函数是:

Path(, pathData)

其中pathData描述为:

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

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

相关内容

  • 没有找到相关文章