长度为 0 的 svg 贝塞尔曲线的坐标答案

【问题标题】：Coordinates for a svg bezier curve of length 0长度为 0 的 svg 贝塞尔曲线的坐标
【发布时间】：2020-09-22 16:02:27
【问题描述】：

我想为 2 条 svg 路径设置动画。为此你需要类似的节点。如果 path1 有贝塞尔曲线，则 path2 必须在同一个节点上也有它。所以我将c0 0 0 0 0 0 插入到path2。但它改变了第二个形状。我能做什么？

<html>
 
        <title>Page Title</title>
    </head>
    <body>
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

           <g 
fill="#000000" stroke="none">
               

<path fill ="red" d= "m50 50 50 50 100 100 50 100" />
<path d= "m0 0 50 50 100 100 50 100" />
<path fill = "blue" d= "m0 0 c0 0 0 0 0 0 50 50 100 100 50 100" />

</g>
</svg>
        
    </body>
</html>

【问题讨论】：

您将需要使用与上一个命令相同的坐标。例如，而不是 M10,10L50,10L90,90 你可以写 M10,10L50,10C50,10 50,10 50,10L90,90 如果这不是 kelping 请编辑你的问题并添加至少 d 属性提到你需要添加贝塞尔曲线的位置
没用。
我有相对坐标code.sololearn.com/WvyA4BJ3Hiqh/?ref=app
请编辑问题并添加mininal reproducible example，即特定示例简单路径
最后，通过将贝塞尔曲线保持在路径中，我希望蓝色形状与黑色形状一样。曲线应该是“中性元素”。

标签： animation svg bezier

【解决方案1】：

路径定义

m 0 0 50 50 100 100 50 100

相当于

一个等效的贝塞尔曲线可能是

m 0 0
c 0 0 50 50 50 50
c 0 0 100 100 100 100
c 0 0 50 100 50 100"

我选择将第一个控制点放在线条/贝塞尔曲线的开头。最后是第二个。我可以选择将它们都放在开头，或者都放在结尾。

如果您使用路径进行动画运动，则应将控制点放置在沿线的 1/3 和 2/3 点处。例如：

m 0 0
c 16.7 16.7 33.3 33.3 50 50
c 33.3 33.3 66.7 66.7 100 100
c 0 0 16.7 33.3 33.3 66.7 50 100"

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

  <g fill="#000000" stroke="none">

    <path fill ="red" d= "m50 50 50 50 100 100 50 100" />
    <path d= "m0 0 50 50 100 100 50 100" />
    <path fill = "blue" d= "
      m 0 0
      c 0 0 50 50 50 50
      c 0 0 100 100 100 100
      c 0 0 50 100 50 100" />

  </g>
</svg>

【讨论】：

用于变形 path1 必须映射到 path2。所以我必须只添加一个节点。
如我所说，前两条路径是等价的。根据您的浏览器，您可能需要使用带有“m”和“l”的非快捷形式。贝塞尔曲线没有快捷形式。
如果您使用c 而不是q，请不要让两个控制点位于同一坐标上，或者与起点或终点坐标重叠。相反，请使用m 0 0 c 33 33 66 66 100 100。（第一个控制在开始和结束之间的 1/3，第二个控制在开始和结束之间的 2/3）。