SVG <line>
SVG 线 - <line>
The <line> 元素用于创建一条线。
The <line> 元素在起点 (x1,y1) 和终点 (x2,y2) 之间创建一条线。
The <line> 元素有四个基本属性来定位和设置线的长度
| 属性 | 描述 |
|---|---|
| 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>
尝试一下 »
代码解释
- The
<x1>和<y1>属性定义线的起点 (0,0) - The
<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>
尝试一下 »
代码解释
- The
<x1>和<y1>属性定义线的起点 (0,10) - The
<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>
尝试一下 »
代码解释
- The
<x1>和<y1>属性定义线的起点 (0,0) - The
<x2>和<y2>属性定义线的终点 (0,200)
