HTML 五角星 -- SVG

在前一篇博客中，讲解了如何在 HTML 页面中通过 CSS 方式显示五角星。在这一篇博客中将会讲解如何通过 SVG 的方式绘制五角星。

其实在页面中通过 SVG 的方式显示五角星，代码很简单；废话不多说，先上代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180">
    <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:red;stroke:red;stroke-width:1;"/>
</svg>

接下来我们就对这这么一段小小的代码进行详细的解读。

1. SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。
   
2. xmlns 属性可定义 SVG 命名空间。关于 SVG 命名空间请参考：SVG namespace
3. version 属性可定义所使用的 SVG 版本。version
   
4. width 和 height 属性可设置此 SVG 文档的宽度和高度。可以是具体的数字，也可以是百分比

这是 svg 的基本使用。接下来就是内部的图形绘制。在 svg 里面，<polygon> 标签用来创建含有不少于三个边的图形(多边形)。points 属性定义多边形每个角的 x 和 y 坐标；

每一个点x坐标和y坐标之间有 , (英文模式)分割，多个坐标点之间以空格隔开。这样 svg 将会将定义的各个点通过线条连接起来。

1. fill:red 定义内部填充颜色(实心)。
2. stroke: red 定义描边线条颜色。
3. stroke-width: 1 定义描边线条宽度。

代码运行的效果图如下图：