如何用svg在网页中画一条带箭头的连接线

Posted 2023-03-09

参考技术A SVG中所有基本形状都是path的简写形式，但是建议使用简写形式，因为这样可以使SVG文档更可读。

path元素更通用，可以通过制定一系列相互连接的线、弧、曲线来绘制任意形状的轮廓，这些轮廓也可以填充或者绘制轮廓线，也可以用来定义裁剪区域或蒙版。

下表为path命令总结，其中大写表示绝对坐标，小写表示相对坐标：

路径的填充同样可以使用fill-rule属性指定填充规则，如果需要填充一个中空的形状，则只需要注意外侧路径顺逆时针方向和内侧空心区域顺逆时针方向即可。

首先，使用 M 移动画笔到起点坐标（这里假设是 0,0 ），然后使用 L 画一条直线至终点坐标（这里假设是 100,100 ）。

这里使用 C 来绘制一条三次贝塞尔曲线。
三次贝塞尔曲线的每个控制点都有两个控制点。 因此，要创建三次贝塞尔曲线，需要指定三组坐标。

这里的最后一组坐标(x,y)指定了线的结束位置。另外两个是控制点。(x1,y1)是曲线开始的控制点，(x2,y2)是曲线结束的控制点。控制点本质上描述了从每一点开始的直线的斜率。然后，贝塞尔函数创建了一条光滑的曲线，从建立的斜率在线的开始，到另一端的斜率。

示例中该条贝塞尔曲线计算公式为

marker元素用来在path上添加一个标记，比如箭头之类的。

首先需要定义好marker元素，然后在path中引用，一个marker标记是一个独立的图形，有自己的私有坐标。

首先，我们使用 marker 画一个箭头。设置orient为 auto ，使箭头的方向自动旋转匹配路径的方向。
然后，可以在连接线的 path 中使用 marker-start , marker-mid , marker-end , marker 属性来设置标记的位置。

这里，我们使用 marker-end 在线的结尾加上箭头。