SVG绘制直线简单介绍

2018-8-4 10:00| 作者: admin| 查看: 1275| 评论: 0|来自: 蚂蚁部落

通过<line>元素可以绘制直线。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="200">
  <line x1="0" y1="10" x2="200" y2="30"
        stroke="red" stroke-width="2" />
</svg>  
</body>
</html>

上面的代码绘制了一个倾斜的直线,下面介绍一下<line>元素上的相关属性。

(1).x1:规定直线起点x轴坐标。

(2).y1:规定直线起点y轴坐标。

(3).x2:规定直线终点x轴坐标。

(4).y2:规定直线终点y轴坐标。

(4).stroke:规定直线颜色。

(5).stroke-width:规定直线的宽度。

使用css也可以实现相同的效果。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
line{
  stroke:red;
  stroke-width:2px;
}
</style>
</head>
<body>
<svg width="300" height="200">
  <line x1="0" y1="10"
        x2="200" y2="30"/>
</svg>  
</body>
</html>

特别说明:svg元素的属性值单位可以省略,默认是像素。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部