SVG 使用marker畫箭頭（一）

一、使用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 相關整理