将SVG曲线拟合为多项式

Question

假设我有像x²或2x +3x²这样的函数，那么如何创建适合这些函数的SVG路径呢？

根据我对 SVG 和 Bezier 曲线的有限理解，我相信我在寻找 for是一种构造贝塞尔控制点的简单技术，可确保结果图符合给定函数。您可以安全地假设（如果您还没有猜到）我是图形编程的新手。我知道像gnuplot这样的框架可以执行这种类型的插值，但我正在寻找更多关于如何使用 SVG 和 JavaScript 进行手动操作的解释。< / p>

编辑：完全符合并非严格要求，但结果图必须合理准确（出于教学目的）。

Answer 1

<?xml version="1.0" standalone="no"?>

SVG提供2阶和3阶的Bézier曲线，对于二次和三次多项式，它应该足够好。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="20cm" height="20cm" viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css"><![CDATA[
    .axis { fill: none; stroke: black; stroke-width: 3; }
    .tick { fill: none; stroke: black; stroke-width: 1; }
    .fun1 { fill: none; stroke: blue; stroke-width: 2; }
    .fun2 { fill: none; stroke: red; stroke-width: 2; }
  ]]></style>
  <polyline class="axis" points="0,500 1000,500" />
  <polyline class="tick" points="0,490 0,510" />
  <polyline class="tick" points="100,490 100,510" />
  <polyline class="tick" points="200,490 200,510" />
  <polyline class="tick" points="300,490 300,510" />
  <polyline class="tick" points="400,490 400,510" />
  <polyline class="tick" points="600,490 600,510" />
  <polyline class="tick" points="700,490 700,510" />
  <polyline class="tick" points="800,490 800,510" />
  <polyline class="tick" points="900,490 900,510" />
  <polyline class="tick" points="1000,490 1000,510" />
  <polyline class="axis" points="500,0 500,1000" />
  <polyline class="tick" points="490,0 510,0" />
  <polyline class="tick" points="490,100 510,100" />
  <polyline class="tick" points="490,200 510,200" />
  <polyline class="tick" points="490,300 510,300" />
  <polyline class="tick" points="490,400 510,400" />
  <polyline class="tick" points="490,600 510,600" />
  <polyline class="tick" points="490,700 510,700" />
  <polyline class="tick" points="490,800 510,800" />
  <polyline class="tick" points="490,900 510,900" />
  <polyline class="tick" points="490,1000 510,1000" />

取y =x² - 4，端点（-3,5）和（3,5）;切线是y = -6x - 13和y = 6x - 13.将一个Q控制点放在两个切线上，位于（0，-13）。这应该适用于任何二次方。

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

立方体有点琐碎。当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" />

（Animated Bézier Curves在我解决这些问题时非常有帮助。）

</svg>

Answer 2

我是来这里寻找公式的，但是我找到了答案。

对于三次贝塞尔曲线，您需要4个点：P0 Pc0 Pc1 P1

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

因此对于公式，我们有：

Equations form A或（等于）Equations form B

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