通过示例了解如何绘制SVG贝塞尔曲线

想知道如何在这个图中画一条像

C

这样的曲线（其中

L

和

L₂是行）


曲线C在两端都是弯曲的，但大部分在中间是直的，只是一点曲线。基本上只是把三条线之间的角修成四舍五入，这三条线彼此不成直角。想知道如何在SVG中实现这一点。这些线是附加的，只是把它们分开来演示这些部分。
 
让我们考虑下面的行< /P>
<svg height="500" width="500">
  <line id="A" x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line id="B" x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>



线A有一个方向（向量）100，-50（150-50，50-100），它的端点是150，50。
线B有一个方向（向量）100,50（150-50250-200），它的端点是150250

我们需要一条曲线（路径），起点为150，50（线a的终点），终点为150，250（线B的终点）



命令C可以创建“curveto”-（立方）贝塞尔线。它的开始和结束向量必须与线A和B的向量相同（成比例）。
所以起始向量（连接到线A）可以是100，-50=>它给出的点是：250，0（150+100=250，50-50=0）
结束向量（连接到线B）可以是100,50=>它给出的点：250300（150+100=250250+50=300）

所以我们需要这样的路径：

<path d="M150 50 C 250, 0 250, 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />



总而言之：

<svg height="500" width="500">
  <line x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
  <path d="M150 50 C 250 0 250 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />
</svg>



给予


如果你中间需要直线，你有两种选择。
最小化曲线向量To（具有相同的比率），例如10，5和10，5，其给出（中间将几乎是直的，但末端将是尖锐的）

将curveto替换为“curveto，stright line，curveto”或“Squadral，stright line，Squadral”

公元1年



公元2年

<path d="M150 50 Q170 40 170 70 L170 230 Q170 260 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />



点170、70和170230应位于170、40和170260之间的直线上，其定义方式与前面所述相同


亲切的问候语
 < P>让我们考虑下面的行

<svg height="500" width="500">
  <line id="A" x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line id="B" x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>



线A有一个方向（向量）100，-50（150-50，50-100），它的端点是150，50。
线B有一个方向（向量）100,50（150-50250-200），它的端点是150250

我们需要一条曲线（路径），起点为150，50（线a的终点），终点为150，250（线B的终点）



命令C可以创建“curveto”-（立方）贝塞尔线。它的开始和结束向量必须与线A和B的向量相同（成比例）。
所以起始向量（连接到线A）可以是100，-50=>它给出的点是：250，0（150+100=250，50-50=0）
结束向量（连接到线B）可以是100,50=>它给出的点：250300（150+100=250250+50=300）

所以我们需要这样的路径：

<path d="M150 50 C 250, 0 250, 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />



总而言之：

<svg height="500" width="500">
  <line x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
  <path d="M150 50 C 250 0 250 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />
</svg>



给予


如果你中间需要直线，你有两种选择。
最小化曲线向量To（具有相同的比率），例如10，5和10，5，其给出（中间将几乎是直的，但末端将是尖锐的）

将curveto替换为“curveto，stright line，curveto”或“Squadral，stright line，Squadral”

公元1年



公元2年

<path d="M150 50 Q170 40 170 70 L170 230 Q170 260 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />



点170、70和170230应位于170、40和170260之间的直线上，其定义方式与前面所述相同


善意的问候
为了直观地了解这是如何工作的，grafical UI（Inkscape、Illustrator、Sketch…）是一个很好的工具。它们都使用相同的隐喻来可视化立方体贝塞尔：一条线“伸出”端点并在控制点处结束，带有一个可以拖动的手柄：：）为了直观地感受其工作原理，grafical UIs（Inkscape、Illustrator、Sketch…）是一个很好的工具。它们都使用相同的隐喻来可视化立方体贝塞尔：一条线“伸出”端点，并以控制点结束，带有一个可以拖动的手柄：）