javascript移动鼠标画一条线

Question

如图，从上面的点按下鼠标，移动鼠标到下面的点，松开鼠标画一条从上至下的连线；目前在网上查的是用canvas画的，但是我目前的dom结构只是用了svg还没有用canvas。除了canvas之外有什么可行的解决方案吗？

Answer 1

因为还在加班所以大致提个思路，当然不一定对啊..
0、先写个div，border为1px，隐藏
1、在上面的点点击时，修改一个状态表示flag = true，并记下点击坐标
2、在hover到下面的点的时候，如果flag == true，那让div显示出来，然后获得移入坐标
3、给div做变换，scale跟rotate用起点跟终点的坐标算
4、显示div
5、flag = false

Answer 2

画一个宽度为0的div