如何使用svg畫箭頭

語言: CN / TW / HK

一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第17天,點擊查看活動詳情

svg是什麼大家都很熟悉了,在這裏就不展開講了。 這次給大家講講怎麼畫箭頭

svg 在直線上畫箭頭

先畫一個三角形,作為箭頭的尖尖

```

``` 此時,我們可以得到一個三角形,像這樣:

image.png

再將三角形放到直線上,形成一個箭頭➡️

那我們怎麼把它放到直線上呢?這時,我們要用到 marker 標籤:

marker 標記可以放在直線,折線,多邊形和路徑的頂點。\ 這些元素可以使用marker屬性的"marker-start","marker-mid"和"marker-end"\ \ markerWidth —— 標記的寬度\ markerHeight —— 標記的高度\ refx —— 標記頂點連接的位置\ refy —— 標記頂點連接的位置

```

``` 此時,我們可得到一個首尾有箭頭的直線:

image.png

好像哪裏不對?設置箭頭方向屬性 —— orient='auto'

但是很明顯,這個箭頭的方向很奇怪,此時,我們需要給 marker 標籤加上一個屬性 —— orient='auto',此時,我們的箭頭方向會跟隨直線方向: <marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto'> <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' /> </marker> 效果如下:

image.png

好像還是不對,設置 refx 屬性

<marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto' refx='3'> <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' /> </marker> 我們可以看到,三角形對齊了線段的兩端,效果如下:

image.png

好像還是不對,設置 refy 屬性

<marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto' refx='3' refy='6' > <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' /> </marker> 我們可以看到,三角形移到了線段的中間位置,效果如下:

image.png

箭頭好像少了一個?

但好像還是有哪裏不對,我們設了三個位置的箭頭,為什麼中間位置沒有呢?

那我們換個標籤試試?

將 line 標籤換成 path 標籤 試試呢?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <marker id='markerArrow' markerHeight='10' markerWidth='10' refx='3' refy='6'> <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' /> </marker> <path d='M10,10 50,50 100,100' stroke='red' stroke-width='2' fill='none' marker-start='url(#markerArrow)' marker-mid='url(#markerArrow)' marker-end='url(#markerArrow)'/> </svg> 得到下圖:

image.png

成了!那我想把箭頭的位置移動一下呢?

可以藉助 marker-mid 屬性和path中間座標,比如,我將 path 路徑換成: <path d='M10,10 90,90 100,100' stroke='red' stroke-width='2' fill='none' marker-start='url(#markerArrow)' marker-mid='url(#markerArrow)' marker-end='url(#markerArrow)'/> 可見三角形位置不在中間了:

image.png

這就是使用svg畫箭頭的方法,很有趣,大家可以自己試一下。