一、使用Marker画箭头

1.定义一个箭头的marker引用

注：orient="auto" 这个属性，箭头的方向会自动适应线条的方向。

2.定义线line，添加marker-start，marker-mid，marker-end 添加箭头加入的相应位置

3.使用path，在曲线中指定箭头位置

显示结果：

可以发现在直线line中marker-mid 是不起作用的，

我试过即使用path画一条直线也是一样的，

直线画中间的箭头需要用到三角函数，

在另一篇文章中有详细介绍：

二、使用SVG.js 画箭头操作示例

 

var draw = SVG('container').size(300, 300);draw.style('border', '1px solid green');//定义markervar arrow = draw.marker(12, 12, function (add) {    add.path('M2,2 L2,11 L10,6 L2,2');    add.style({        fill: 'green'    });});//使用 Marke标记画箭头//画箭头var line = draw.line(0, 0, 200, 150);line.stroke('blue').attr({    'stroke-width': 2});line.marker('end', arrow);//画箭头2var line2 = draw.polyline([    [100, 0],    [100, 200],    [150, 200]]);line2.fill('none').style({    stroke: 'red',    'stroke-width': 1});line2.marker('end', arrow)

 

更多：