SVG - 线条_SVG 菜鸟教程

<line> 元素用于绘制具有起点和终点的线条。

声明

以下是 <line> 元素的语法声明。我们只展示了主要属性。

<line
	 	x1="x-axis co-ordinate"
	 	y1="y-axis co-ordinate"
	 	
	 	x2="x-axis co-ordinate"	
	 	y2="y-axis co-ordinate" > 	 	
</line>

属性

名称	描述
x1	起点的 x 轴坐标。默认值为 0。
y1	起点的 y 轴坐标。默认值为 0。
x2	端点的 x 轴坐标。默认值为 0。
y2	端点的 y 轴坐标。默认值为 0。

例

testSVG.htm

<html>
	 	<title>SVG Line</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="200">
	 	 	 	 	<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)"></line>	
	 	 	 	 	</g>	
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

具有不透明度的线条

<html>
	 	<title>SVG Line</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="200">	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="15" fill="black" >线条 #2: 不透明度</text>
	 	 	 	 	 		
	 	 	 	 	 	 <line x1="20" y1="20" x2="150" y2="150" 	
	 	 	 	 	 	 style="fill:rgb(121,0,121);stroke-width:3;
	 	 	 	 	 	 stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"></line>	
	 	 	 	 	</g>
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 椭圆 SVG - 多边形 >>