這次要練習的是SVG的line
、polyline
、polygon
,這三個都有點類似,但是Polyline和Polygon兩者之間卻有線與塊之間的差異。
Line
line簡單來說就是兩個點之間的線段,所以起點是x1、y1,終點則是x2、y2。
<svg width="100%" height="100">
<line x1="0" y1="0" x2="300" y2="0" style="stroke: pink; "/>
<line x1="0" y1="10" x2="300" y2="10" x3="200" y3="30" style="stroke: pink; "/>
</svg>
但是line只能當做兩點間的線段,就算寫了x3
、y3
都是沒用的喔(如上)。
Polyline
Polyline我查到的中文翻譯是折線,它主要是繪製多點線段。
<svg width="100%" height="100">
<polyline points="40,0 60,60 0,60" style=" stroke:red; stroke-width:2"/>
<polyline points="140,0 160,60 100,60" style="fill:none; stroke:red; stroke-width:2"/>
<polyline points="240,0 260,60 200,60 240,0" style="fill:none; stroke:red; stroke-width:2"/>
</svg>
Polyline有點類似Illustrator的鋼筆工具(但還不能繪製弧線),在線段之間還能填入色彩,但特別要注意的是他並不是自動封閉線段。
Polygon
Polygon中文翻譯為多邊形,用來繪製不少於3個邊的圖形。
<svg width="100%" height="100">
<polygon points="40,0 60,60 0,60" style=" stroke:red; stroke-width:2"/>
<polygon points="140,0 160,60 100,60" style="fill:none; stroke:red; stroke-width:2"/>
<polygon points="240,0 260,60 200,60 240,0" style="fill:none; stroke:red; stroke-width:2"/>
</svg>
這邊我刻意用和polyline相同的code,兩者只有標簽不同,從這樣比較能夠比對出兩個不同的地方,重點就是Polygon會自動連接最後點到第一個點。