SVG 使用marker畫箭頭(一)

2022-02-26 12:50:41 字數 2386 閱讀 1629

一、使用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畫一條直線也是一樣的,

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

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

二、使用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...