SVG <line>
SVG 線條 - <line>
<line> 元素用於建立線條。
<line> 元素在起始位置 (x1,y1) 和結束位置 (x2,y2) 之間建立一條線。
<line> 元素有四個基本屬性來定位和設定線的長度
| Attribute | 描述 |
|---|---|
| x1 | 線在 x 軸上的起點 |
| y1 | 線在 y 軸上的起點 |
| x2 | 線在 x 軸上的終點 |
| y2 | 線在 y 軸上的終點 |
一個 SVG 線條
以下示例建立一條從位置 (0,0) 到 (300,200) 的線
這是 SVG 程式碼
示例
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="200" style="stroke:red;stroke-width:2" />
</svg>
自己動手試一試 »
程式碼解釋
<x1>和<y1>屬性定義線的起點 (0,0)<x2>和<y2>屬性定義線的終點 (300,200)
一條水平線
以下示例建立一條從位置 (0,10) 到 (250,10) 的粗水平線
這是 SVG 程式碼
示例
<svg height="50" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />
</svg>
自己動手試一試 »
程式碼解釋
<x1>和<y1>屬性定義線的起點 (0,10)<x2>和<y2>屬性定義線的終點 (250,10)
一條垂直線
以下示例建立一條從位置 (0,0) 到 (0,200) 的粗垂直線
這是 SVG 程式碼
示例
<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
</svg>
自己動手試一試 »
程式碼解釋
<x1>和<y1>屬性定義線的起點 (0,0)<x2>和<y2>屬性定義線的終點 (0,200)
