SVG 自學微筆記(06) - 線段的特性

2023-05-24

2023-06-22

資料視覺化

不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

在前面的微筆記中，有使用到<line></line>來繪製線段，雖然還沒寫SVG Path的內容，但Path其實也能拿來繪製線段喔! 在本篇微筆記會使用到非常簡單的Path來繪製線段，並介紹幾種線段的特性(Stroke Property)。

SVG : 線段

(僅列出部分有使用到的屬性)

<svg></svg>
- height : 整個圖形(畫布)的原始長度
- width: 整個圖形(畫布)的原始寬度
<g></g>
- 主要的作用是群組化，可以設定共通屬性
<path></path> 或 <path />
- d : 路徑(path)會經過的點(x,y)
- stroke : 線段顏色
- stroke-width : 線段的寬度
- stroke-linecap : 線段頭尾的形式
- stroke-dasharray : 用來建立虛線的間隔陣列
- stroke-opacity : 線段顏色的透明度

範例1 - 線段顏色

Path可以做的操作蠻多也挺複雜的~

d放的是path會經過的點，還有關於這些點的操作
- M : 移動路徑初始點
- L : 將初始點連線(Line To)到某一點
- Z : 關閉路徑

<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>

參考資料

SVG Stroke Properties - W3Schools

技術類文章