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

path命令

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

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

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

命令	参数	说明
M m	x y	移动画笔到制定坐标
L l	x y	绘制一条到给定坐标的线
H h	x	绘制一条到给定x坐标的横线
V v	y	绘制一条到给定y坐标的垂线
A a	rx ry x-axis-rotation large-arc sweep x y	圆弧曲线命令有7个参数，依次表示x方向半径、y方向半径、旋转角度、大圆标识、顺逆时针标识、目标点x、目标点y。大圆标识和顺逆时针以0和1表示。0表示小圆、逆时针
Q q	x1 y1 x y	绘制一条从当前点到x,y控制点为x1,y1的二次贝塞尔曲线
T t	x y	绘制一条从当前点到x,y的光滑二次贝塞尔曲线，控制点为前一个Q命令的控制点的中心对称点，如果没有前一条则已当前点为控制点。
C c	x1 y1 x2 y2 x y	绘制一条从当前点到x,y控制点为x1,y1 x2,y2的三次贝塞尔曲线
S s	x2 y2 x y	绘制一条从当前点到x,y的光滑三次贝塞尔曲线。第一个控制点为前一个C命令的第二个控制点的中心对称点，如果没有前一条曲线，则第一个控制点为当前的点。

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

绘制一条直线

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

image.png

绘制一条贝塞尔曲线

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

 C x1 y1, x2 y2, x y 

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

image.png

image.png

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

    const startX = 0, startY = 0, endX = 100, endY = 100;

    const yOffset = Math.abs(endY - startY) / 2;
    const centerY = endY < startY ? endY + yOffset : endY - yOffset;

    const xOffset = Math.abs(endX - startX) / 2;
    const centerX = endX < startX ? endX + xOffset : endX - xOffset;

    const pathAttr = `M ${startX},${startY} C ${centerX},${startY} ${centerX},${endY} ${endX},${endY}`;

marker元素

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

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

marker属性	说明
markerWidth	marker标记的宽度
markerHeight	marker标记的高度
refX refY	指定marker中的哪个坐标与路径的开始坐标对齐
orient	自动旋转匹配路径的方向，需要设置为auto
markerUnits	这个属性决定标记的坐标系统是否需要根据path的笔画宽度调整，如果设置为strokeWidth，则标记会自动调整大小。如果设置为useSpaceOnUse，则不会自动调整标记的大小。
viewBox preserveAspectRatio	设置标记的显示效果，比如可以将标记的(0,0)设置在标记网格中心

image.png

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

• marker-start 属性将在给定形状的第一个顶点绘制的箭头或多边形标记。
  

  image.png

• marker-mid 属性将在给定形状的所有内部顶点绘制的箭头或多边形标记。
  

  image.png

• marker-end 属性将在给定形状的最终顶点绘制箭头或者多边形标记。
  

  image.png

• marker 属性，则表示同时设置marker-start,marker-mid,marker-end三个属性。

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

示例

image.png