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. Move(M)到(200,90).

2. 绘制一个Cubic(C)Bezier曲线

   一个.从当前位置开始(200,90)
   b.第一个控制点(200,90)- 与起点
   c 相同.第二个控制点在(0,0)
   d.结束于(90,300)