SVG参考手册
分类 | Elements
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 |
加载中,请稍侯......