第11天:如何使用SVG绘制二次贝塞尔曲线

792 阅读1分钟

当我们开始使用曲线时,路径元素变得非常强大。我们不仅要设置端点,还要设置控制点。

控制点是一个看不见的坐标,线弯曲到它,但不接触它。看看这张快乐的脸!这里,不可见的控制点位于图像底部的中间(在 0,100 处)。

在上面的示例中,控制点位于两个端点的相同距离处。这是不必要的。在下面的例子中,我们用一个圆圈标记控制点。请注意,控制点和圆具有相同的坐标。

[点击这里观看二次贝塞尔曲线的交互式演示](SVG Curves (hunormarton.github.io))。

在今天的例子中,我们有一系列的贝塞尔曲线,随着路径的下降,控制点越来越远离树的中心。

如果我们将上面的每个二次贝塞尔曲线分解为两个具有相同坐标的线段,则看起来像这样: