SVG的curveTo（C）如何工作？

Question

我需要您的帮助，我有些困惑。

我的问题是关于SVG的curveTo函数，我真的无法理解它的工作原理。

请看这个例子。

<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坐标代表什么。

- Mohamad Haidar

---

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C - Alexey Ten

Answer 1

您正在绘制一个具有两个控制点的三次贝塞尔曲线。但其中一个控制点具有与起始点相同的坐标。

1. 将（M）移动到（200,90）。

2. 绘制一个三次贝塞尔曲线（C）

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

- helderdarocha

---

你认为结束坐标在哪里（90, 30）？我看到最后是 90 300。你的字母 d 是不是指的是 (90,300)？ - jack blank

是的。没错。应该是300，不是30。谢谢。我会修正它。 - helderdarocha

Answer 2

贝塞尔曲线有些难以理解。也许http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C上的部分可以帮助，之前关于二次贝塞尔曲线的部分也许有所帮助。正如早期的帖子指出的那样，如果你的起点和控制点重合，情况会变得更加奇怪，但也许还是有帮助的。

- user3665322