SVG路径中的'M'、'c'和'z'代表什么意思？

Question

http://paperjs.org/examples/

我正在努力使用Chain创建自定义路径，并且我看到Tadpoles有一个预定义的心形路径，因此我正在尝试复制它，但是我不理解其中的一些部分。

var heartPath = new Path('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 -23.82422,49.24902 -30.9209,75.58594z');

我不明白路径开头的M是什么意思，或者一些值中的c是什么意思，或者路径结尾的z是什么意思。我尝试在他们的文档或Google上找到相关信息，但由于单个字母搜索很困难，因此我找不到想要的结果。

我试图删除开头的M，但是蝌蚪停止了移动，所以我猜M可能意味着“运动”？删除c会改变心脏的形状，但删除z似乎没有改变任何东西。

- Avery

---

好的阅读材料：https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths - Gerardo Furtado

@skypjack在标题中非常明确地问道“SVG路径中的'M'、'c'和'z'代表什么？”，而你的回答并没有解释被问到的内容。另一个答案更直接，没有让任何读者产生疑问。 - vsync

@vsync 明白了。我不是谷歌，通常我会阅读问题并尝试回答它们，而不是只看标题。至少我已经理解了负评，并为此感到自豪。谢谢。 - skypjack

我不想冒犯，但我认为其他从谷歌来到这里的人可能希望阅读其他答案，因为它回答了标题，对于谷歌搜索问题的许多人比打开此问题的单个人（OP）更有益。 - vsync

不知道标记指向正确方向的答案会引发这样的争论。@vsync，我不知道你为什么对此如此激动——当我提出问题时，我只看了Paper.js的文档，没有想到他们使用的Path()是SVG的文档。skypjack解决了我的疑虑，所以我将他的答案标记为正确答案。 - Avery

Answer 1

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

- Bamieh

Answer 2

你正在调用的构造函数是this:

Path(, pathData)

pathData 被描述为：

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

你应该阅读的文档是 SVG 的文档。
正如 @GerardoFurtado 在评论中提到的，这里 可能会对你有所帮助。

- skypjack

---

有趣。为什么要踩呢？留个评论至少可以帮助改进答案。 - skypjack