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)
