SVG curveTo（C）如何工作？

Question

我需要你的帮助，我有点困惑。

我的问题是SVG曲线如何工作，我真的无法理解。

寻找这个例子

<svg height="400" width="400">
 <path d="M 200 90 C 200  90 0 0 90  300 " stroke="black" fill="none" stroke-width="3"/>
</svg>

此代码绘制此形状

但实际上我无法理解这是怎么做的，我无法理解曲线如何识别以及控制点是什么以及在我的例子中0 0坐标代表什么。

Answer 1

您正在绘制 Cubic Bezier 曲线（使用两个控制点）。但其中一个控制点的坐标与起点相同。

1. 将（M）移至（200,90）。

2. 绘制 Cubic （C）Bezier曲线

   一个。从当前位置(200,90)开始 湾第一个控制点在(200,90) - 相同作为起点
   C。 (0,0)的第二个控制点 d。结束于(90,300)

Answer 2

贝塞尔曲线有点难以理解。或许http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C处的部分可能会有所帮助，也可能是之前关于二次贝塞尔曲线的部分。正如早先的海报所指出的那样，让你的起点和控制点重合使你的情况有点奇怪，或许也是。