SVG Line（直线）
<line>元素用来画一条线，它是通过给定的起点坐标和终点坐标来绘制的。
语法
下面是<line>元素的语法，这里只介绍主要的属性。
<line
x1="x轴坐标"
y1="y轴坐标"
x2="x轴坐标"
y2="y轴坐标" >
</line>
属性
| S.N. | 名称和描述 |
|---|---|
| 1 | x1 - 起点的x轴坐标，默认为0。 |
| 2 | y1 - 起点的y轴坐标，默认为0。 |
| 3 | x2 - 终点的x轴坐标，默认为0。 |
| 4 | y2 - 终点的y轴坐标，默认为0。 |
实例
testSVG.html<html>
<title>SVG直线实例</title>
<body>
<h1>SVG直线实例</h1>
<svg width="300" height="350">
<g>
<text x="0" y="15" fill="black" >直线 #1: 不透明.</text>
<line x1="20" y1="20" x2="150" y2="150"
stroke="black" stroke-width="3" fill="rgb(121,0,121)">
</g>
<g>
<text x="0" y="215" fill="black" >直线 #2: 透明 </text>
<line x1="20" y1="220" x2="150" y2="350"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5">
</g>
</svg>
</body>
</html>
输出
在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。
SVG直线实例
实例中，使用了style（样式），这里说下几个样式的含义。fill - 填充颜色，none表示不填充颜色，stroke-width - 图边的宽度 ， stroke - 图边的颜色 ， stroke-opacity - 图边透明度 ， opacity - 图形透明度 。
