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
>

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
>

<

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畫一條直線也是一樣的，

直線畫中間的箭頭需要用到三角函式，

在另一篇文章中有詳細介紹：

二、使用svg.js 畫箭頭操作示例

var draw = svg('container').size(300, 300);

draw.style('border', '1px solid green');
//定義marker
var arrow = draw.marker(12, 12, function
(add) );
});//
使用 marke標記畫箭頭
//畫箭頭
var line = draw.line(0, 0, 200, 150);
line.stroke('blue').attr();
line.marker('end', arrow);
//畫箭頭2
更多：svg path路徑使用（一）
svg stroke屬性
svg 相關整理
 
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...
HTML5 SVG用marker畫箭頭
1 定義乙個箭頭的marker 有了orient auto 這個屬性，箭頭的方向就會自動適應線條的方向 2 定義一條線line或path等，新增屬性 marker start 最開始 marker mid 中間 marker end 結尾 將箭頭加入相應位置 效果圖 可以發現在直線line中mark...
HTML5 SVG用marker畫箭頭
1 定義乙個箭頭的marker 有了orient auto 這個屬性，箭頭的方向就會自動適應線條的方向 2 定義一條線line或path等，新增屬性 marker start 最開始 marker mid 中間 marker end 結尾 將箭頭加入相應位置 效果圖 可以發現在直線line中mark...