2019年6月28日 星期五

線段上的圖形- SVG 的 marker

svg 的 marker 讓你可以在一條線的起點、終點跟轉折點設置圖形,要來做互動圖表或是比較有彈性的圖,比如趨勢圖之類的還滿方便的,用法是先在 defs 裡用 marker 定義形狀,記得設定 id 就可以使用。


要使用的時候再在 polyline 上使用 marker-start(起點)、marker-end(終點)和marker-mid(轉折點)上設定要使用的 mark 就可以把圖示放到線段上了,可以看一下這個範例:

See the Pen
svg marker
by deathhell (@deathhell)
on CodePen.



反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...