Javascript 将SVG曲线拟合到多项式

假设我有x²或2x+3x²之类的函数，如何创建适合这些函数的SVG路径

从我对SVG和Bezier曲线的有限理解来看，我相信我正在寻找 for是一种构造bezier控制点的简单技术，可确保生成的图形符合给定函数。你可以放心地假设（如果你还没有猜到的话）我是图形编程的新手。我知道像这样的框架可以执行这种类型的插值，但我想了解更多关于如何使用SVG和JavaScript手动执行插值的说明

编辑：精确拟合不是严格要求，但生成的图形必须相当准确（用于教学目的）

立体派有点诡计多端。当y=（x³-9x）/16从（-5，-5）到（5，5）时，切线为y=（33x+125）/8和y=（33x-125）/8。考虑到曲线必须以-9/16的斜率通过（0，0），找到

C

控制点（-5/3，35/4）和（5/3，35/4）是一个简单的计算。在大多数情况下，用手可能不可行，但我认为这种方法在数值上应该适用于任何其他立方体-两个变量表示控制点沿每条切线的距离，两个约束强制特定点和方向

  <path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" />

（我在做这些的时候帮了我很大的忙。）

---

我来这里寻找配方，但我找到了答案

对于三次Bézier曲线，需要4个点：p0pc0pc1p1

We consider x0 < x1, f(x) = ax³ + bx² + cx + d and f'(x) = 3ax² + 2bx + c.

<代码>我们考虑x0 对于我们的公式：

或者（相当于）

---

我希望这会对其他人有所帮助。

我不确定你是否能准确地描述一个具有相同阶贝塞尔曲线的多项式。@codeinchao的反馈很好，出于好奇，人们如何用SVG绘制多项式？我已经看过了，但不确定人们是如何从函数到图形的。精确拟合不是一个严格的要求，尽管图形必须相当精确。我假设他们绘制它就像绘制任何其他函数一样：计算曲线上许多点的函数值（1000左右），然后通过曲线拟合函数。这是直线最简单的情况，但是用高次bézier曲线肯定会更好，但我不记得有什么方便的方法来计算控制点。答案很棒。我观察到没有高阶多项式的泛化（除了拼接一吨小直线？）@LarsTackmann，如果SVG有4阶Béziers，我希望能够绘制四次多项式，等等。但这很快就会变得复杂。使用Bézier样条曲线（应该能够匹配一阶导数和二阶导数）看起来比直线段更好，但无论如何，它都不精确。

  <path class="fun1" d="M200,0 Q500,1800 800,0" />

  <path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" />

</svg>

We consider x0 < x1, f(x) = ax³ + bx² + cx + d and f'(x) = 3ax² + 2bx + c.