svg系列之polygon

说在前面：svg作为html5中提出的一个创建可缩放矢量图形的标签，为我们创建各种丰富多彩的图层提供了可能。它和canvas的区别以及联系，这里就不介绍了，w3c官网上面已经说的很清楚了，这是我在学习svg的过程中记录下来的，当做笔记吧，有学习的同学可以相互交流一下。开始吧！

首先看一段代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <svg width="300" height="200">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
   Sorry, your browser does not support inline SVG.
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100 100,10 250,150 200,110"
           style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>

　　

复制上述代码放在test.html文件中就可以看到第一个svg中显示的是一个五角星，其中有边框的填充以及内部空间的颜色渲染，看到这些是否觉得很神奇，下面将详细介绍为什么会出现上述图形。第二个svg中显示的是一个不规则的三角形，相信在看了第一个svg的介绍之后，理解第二个图形就很容易了。

 

1、polygon 这是html5中提供的一个标签，使用该标签可以绘制不规则的图形，用来创建一个不少于三条边的图形，这个没什么要解释的；

2、属性 points属性规定了绘制图形的时候的一系列坐标点，ok，其实关键就是这里，下面解释一下

上述第一个svg标签中points="100,10 40,180 190,60 10, 60 160,180"，可以看到这面室友5个点 每一个点以空格键分开，逗号两边的则是这个点的X以及Y坐标，ok，问题来了，坐标的相对位置是哪里，这里当然是外面的svg容器的左上角位置，可以看到上述5个点的位置分别为X1(100,10),X2(40,180),X3(190,60),X4(10,60),X5(160,180)。可以想象一下这五个点究竟能够画出什么图形。我大概画了一下，如下图所示：

好了，根据polygon定义，绘制的图形是封闭的，所以可以看出，根据点的位置顺序，该图形是一个五角形。大致形状绘制出来之后，下面的任务就是对其进行填充。

注意：你可能会问，这些点的顺序必须是这样的吗，我的回答是你必须按照顺时针或者逆时针的顺序绘制该图形，否则你会看到千奇百怪的图形，不信你可以试一下！

填充样式选择，html5提供了诸多选择，在这里file可以设置封闭图形的填充颜色，如果你不填的话，会使用黑色进行填充。

stroke的话则是对边框进行渲染，上述属性中有设置边框的颜色以及宽度渲染，你可以尝试一下其他的渲染方案，是一个很有趣的过程。

好了，下面谈到fill-rule，这一点我在这里不想细说了，可以参考点击打开链接

ok，有关第一个svg的渲染解释到此完毕。

你可以根据前面的解释看一下第二个svg或者尝试更复杂的图形绘制。

说明：这是我学习过程中的一个记录，有不足之处，欢迎大家指出并与我联系！

By Ygh1224 原文地址 http://blog.csdn.net/yang_1224/article/details/24527875

posted @ 2014-04-26 14:25  九一菜鸟  阅读(975)  评论(0)    收藏  举报