Home » SVG 入門教學

[SVG]SVG 基本圖形 - 直線 line

[ 日期： | 瀏覽：7,640 | 迴響：搶沙發 ]

數學課都有學過的，兩點決定一條直線，所以在使用 <line> 標籤時，就得提供兩個座標點才行。

檢視原始碼 HTML
1
2
3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<line x1="40" y1="10" x2="200" y2="70" style="stroke:red;stroke-width:5" />
</svg>

x1 及 y1 就是第一個點，接著 x2 及 y2 就是第二個點，然後就會連成線囉！
svg-shape-line-1

多幾條線就能組合出各種不同的畫面：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<line x1="40" y1="70" x2="250" y2="70" style="stroke:black;stroke-width:5" />
 
	<line x1="40" y1="140" x2="250" y2="140" style="stroke:black;stroke-width:5" />
 
	<line x1="100" y1="10" x2="100" y2="200" style="stroke:black;stroke-width:5" />
 
	<line x1="180" y1="10" x2="180" y2="200" style="stroke:black;stroke-width:5" />
 
	<circle cx="140" cy="105" r="20" style="fill:none;stroke:red;stroke-width:4;" />
 
	<line x1="50" y1="20" x2="80" y2="50" style="stroke:black;stroke-width:5" />
 
	<line x1="80" y1="20" x2="50" y2="50" style="stroke:black;stroke-width:5" />
</svg>

svg-shape-line-2

要看的到直線的話，必需指定 stroke 才會看的到線條，否則就變成國王的直線了！

筆者將 line 的屬性整理成一個簡單的表格：

line 屬性

屬性名稱 屬性說明
x1 起始點 x 軸的座標
y1 起始點 y 軸的座標/td>
x2 結束點 x 軸的座標
y2 結束點 y 軸的座標/td>
transform 直線的變形效果，類似 css 中的 transform

[ 標籤： ]

發表迴響