'M'、'c' 和 'z' 在 SVG 路径中是什么意思?
What do the 'M', 'c' and 'z' mean in SVG paths?
我正在尝试使用 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 可能意味着 'moving'?移除 c 会改变心形,但移除 z 似乎没有任何改变。
您调用的构造函数是this:
Path(, pathData)
其中 pathData
描述为:
the SVG path-data that describes the geometry of this path
您应该阅读的文档是 SVG 文档。
正如@GerardoFurtado 在评论中提到的,here 是一本您可能感兴趣的读物。
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 以获得所有可能的命令及其用法的完整参考。
我正在尝试使用 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 可能意味着 'moving'?移除 c 会改变心形,但移除 z 似乎没有任何改变。
您调用的构造函数是this:
Path(, pathData)
其中 pathData
描述为:
the SVG path-data that describes the geometry of this path
您应该阅读的文档是 SVG 文档。
正如@GerardoFurtado 在评论中提到的,here 是一本您可能感兴趣的读物。
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 以获得所有可能的命令及其用法的完整参考。