将SVG曲线拟合为多项式

Question

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

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

编辑:精确拟合并不是一个严格的要求,但结果图必须合理准确(出于教学目的).

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.看到曲线必须通过(0,0)斜率-9/16,这是一个简单的计算,找到C控制点(-5/3,35/4)和(5/3,35/4).在大多数情况下,这可能不是手工操作,但我认为这种方法在数值上应该可以用于任何其他立方体 - 两个变量用于控制点位于每个切线的距离,以及强制特定点和方向的两个约束.

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

(动画BézierCurves在我解决这些问题时非常有帮助.)

</svg>