SVG 使用marker画箭头

Posted 2020-10-01 天马3798

一、使用Marker画箭头

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

<defs>
    <marker id=\'markerArrow\' markerWidth=\'13\' markerHeight=\'13\' refx=\'2\' refy=\'6\' orient=\'auto\'>
        <path d=\'M2,2 L2,11 L10,6 L2,2\' style=\'fill:#00ff00\' />
    </marker>
</defs>

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

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

<line x1=\'10\' y1=\'10\' x2=\'100\' y2=\'50\' stroke=\'red\' stroke-width=\'2\'
    marker-start=\'url(#markerArrow)\'
    marker-mid=\'url(#markerArrow)\'
    marker-end=\'url(#markerArrow)\'>
</line>
            
<line x1=\'100\' y1=\'100\' x2=\'200\' y2=\'150\' stroke=\'red\' stroke-width=\'2\'
    marker-end=\'url(#markerArrow)\'></line>

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

<path d=\'M50,250 c15,-75 30,30 100,0 s50,-50 150,50\'
stroke=\'brown\' stroke-width=\'5\' fill=\'none\'
marker-start=\'url(#markerArrow)\'
marker-mid=\'url(#markerArrow)\'
marker-end=\'url(#markerArrow)\'/>

显示结果：

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

我试过即使用path画一条直线也是一样的，
直线画中间的箭头需要用到三角函数，

在另一篇文章中有详细介绍：http://blog.csdn.net/tuposky/article/details/40677477

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

 

var draw = SVG(\'container\').size(300, 300);
draw.style(\'border\', \'1px solid green\');

//定义marker
var 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);

//画箭头2
var line2 = draw.polyline([
    [100, 0],
    [100, 200],
    [150, 200]
]);
line2.fill(\'none\').style({
    stroke: \'red\',
    \'stroke-width\': 1
});
line2.marker(\'end\', arrow)

 

更多：

SVG Path路径使用（一）

SVG Stroke属性

SVG 相关整理