SVG绘制折线和多边形

2018-2-4 10:50| 发布者: admin| 查看: 499| 评论: 0|来自: 钱柜手机网页版

<polyline>和<polygon>元素可以绘制折线和多边形,下面通过代码实例做一下介绍。

一.绘制折线:

先看一段关于<polyline>元素的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
</head>
<body>
<svg width="300" height="200">
  <polyline points="10,2  60,2  35,52"
            stroke="red"
            stroke-width=2;
            fill="green" />
</svg>  
</body>
</html>

points属性可以定义一系列的点;每一组点都有两个数字组成(由逗号分隔,第一个数字表示x轴坐标,第二个数字表示y轴坐标),这些点连接起来就形成了折线,最后一个点和起始点不会连接。

二.绘制多边形:

<polygon>用来绘制折线,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
</head>
<body>
<svg width="300" height="200">
  <polygon points="10,2  60,2  35,52"
            stroke="red"
            stroke-width=2;
            fill="green" />
</svg>  
</body>
</html>

折线和多边形非常的类似,但两者之间有一个明显的区别,多边形最后一个点会和起始点闭合起来。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部