html中line直线不显示,SVG Line（直线）

SVG Line(直线)

元素用来画一条线，它是通过给定的起点坐标和终点坐标来绘制的。

语法

下面是元素的语法，这里只介绍主要的属性。

x1="x轴坐标"

y1="y轴坐标"

x2="x轴坐标"

y2="y轴坐标" >

属性S.N. 名称和描述

1 x1 - 起点的x轴坐标，默认为0。

2 y1 - 起点的y轴坐标，默认为0。

3 x2 - 终点的x轴坐标，默认为0。

4 y2 - 终点的y轴坐标，默认为0。

实例testSVG.html

SVG直线实例

SVG直线实例

直线 #1: 不透明.

stroke="black" stroke-width="3" fill="rgb(121,0,121)">

直线 #2: 透明

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5">

输出

在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。

SVG直线实例

实例中，使用了style(样式)，这里说下几个样式的含义。fill - 填充颜色，none表示不填充颜色，stroke-width - 图边的宽度 ，  stroke- 图边的颜色 ，  stroke-opacity - 图边透明度 ，  opacity- 图形透明度 。