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

Question

想知道如何在此图中绘制类似C的曲线（其中L和L₂是线）。

曲线C的两端只是弯曲的，但大部分在中间是笔直的，只是一点点弯曲。基本上只是对彼此不成直角的3条线之间的角进行四舍五入。想知道如何在SVG中执行此操作。这些线是附加的，只是分别画出它们来演示作品。

Answer 1

让我们考虑以下几行

<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-50、250-200），其终点为150、250。

我们需要一条曲线（路径），其起点在150、50（A线的终点），终点在150、250（B的终点）。

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

命令C可以创建“曲线”-（三次）贝塞尔曲线。它的开始和结束向量必须（与比例成正比）与A行和B行的向量相同。 因此，起始向量（连接到A行）可能是100，-50 =>它给出了点：250，0（150 + 100 = 250，50-50 = 0） 结束向量（连接到B行）可能是100,50 =>它给出了点：250，300（150 + 100 = 250，250 + 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>

给予

如果中间确实需要直线，则有两个选择。

1. 最小化curveto的向量（具有相同的比率），例如10、5和10、5，这样得到（中间几乎是笔直的，但末端是尖的）

2. 用“曲线，直线，curveto”或“二次，直线，二次”替换curveto。

广告1。

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

广告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和170,230应该位于170,40和170,260之间的直线上，该点的定义方法与前面所述相同。

亲切的问候