不定更新、可能爛尾XD
學習資源: W3Schools、其他網路資料
在前面的微筆記中，有使用到<line></line>來繪製線段，雖然還沒寫SVG Path的內容，但Path其實也能拿來繪製線段喔! 在本篇微筆記會使用到非常簡單的Path來繪製線段，並介紹幾種線段的特性(Stroke Property)。
SVG : 線段
- 範例1 - 線段顏色
Path可以做的操作蠻多也挺複雜的~
<svg height="300" width="400">
<g>
<path stroke="red" d="M20 30 L200 30Z"></path>
<path stroke="green" d="M20 50 L200 50Z"></path>
<path stroke="blue" d="M20 70 L200 70Z"></path>
</g>
</svg>
- 範例2 - 線段寬度
可以利用<g></g>把線段群組化並設定共通屬性，像下面就把所有線段都設為黑色。
<svg height="300" width="400">
<g stroke="black">
<path stroke-width="2" d="M20 30 L200 30Z"></path>
<path stroke-width="4" d="M20 50 L200 50Z"></path>
<path stroke-width="6" d="M20 70 L200 70Z"></path>
</g>
</svg>
- 範例3 - 線段頭尾形式
除了round可以很容易看出效果，其他兩種效果都看不太出來。這邊還要注意不能用Z關閉路徑，不然stroke-linecap會無法產生效果。
<svg height="300" width="400">
<g stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M20 30 L200 30"/>
<path stroke-linecap="round" d="M20 50 L200 50"/>
<path stroke-linecap="square" d="M20 70 L200 70"/>
</g>
</svg>
- 範例4 - 線段的虛線形式
透過stroke-dasharray可以規範虛線段的間隔(1實線1空白)。舉stroke-dasharray="5,10,5,10"為例，實線是5單位而空白是10單位，以5實5空5實5空不斷做循環。
<svg height="300" width="400">
<g stroke="black" stroke-width="6">
<path stroke-dasharray="10,10" d="M20 30 L200 30"/>
<path stroke-dasharray="5,10,5,10" d="M20 50 L200 50"/>
<path stroke-dasharray="5,10,20,10" d="M20 70 L200 70"/>
</g>
</svg>
參考資料
