line
<line>
该<line>元件是用于创建连接两个点的线的SVG基本形状。
用法上下文
| 分类 | 基本形状元素，图形元素，形状元素 |
|---|---|
| 允许的内容 | 任意数量的以下元素，以任何顺序排列：动画元素描述性元素 |
属性
全局属性
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
class
style
externalResourcesRequired
transform
具体属性
x1
x2
y1
y2
DOM接口
这个元素实现了SVGLineElement接口。
例子
Diagonal line using attributes
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="100" x2="100" y2="20"
stroke-width="2" stroke="black"/>
</svg>
结果
使用变换的对角线
您也可以应用转换来获得相同的结果。从法线开始，然后添加转换选项来改变线的方向。
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="100" x2="100" y2="100"
stroke-width="2" stroke="black" transform="rotate(-45 20 100)"/>
</svg>
结果
产品规格
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2The definition of '<line>' in that specification. | Candidate Recommendation | Changed the x1, y1, x2 and y2 attributes to take <length>s, <percentage>s and <number>s |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<line>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0 | (Yes) | 1.0 (1.8) | No support | (Yes) | 3.0.4 |
