SVG 多边形＜polygon＞，矩形＜rect＞的示例代码

本专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。
本专栏的风格是力求简洁明了。

矩形

SVG使用来创建矩形，里面的元素包括原点，宽度长度，不透明度等。

矩形规则

在这里插入图片描述

矩形效果图

在这里插入图片描述

矩形源代码

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250"><rect width="100" height="100" style="fill:rgb(0,0,100,0.5);stroke-width:2;stroke:rgb(100,0,0)" /><rect x="120" y="20" width="100" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/><rect x="250" y="30" rx="20" ry="20" width="100" height="50" style="fill:yellow;stroke:green;stroke-width:5;opacity:0.5"/>
</svg></body>
</html>

多边形

SVG 使用来画多边形。

points是图形顶点的集合，坐标之间与点之间使用空格或逗号来隔开，比如points="x1 y1 x2 y2 x3 y3"或者points=“x1,y1,x2,y2,x3,y3”；但为了显示方便与规范，统一坐标之间用逗号隔开，点之间用空格隔开，如points=“x1,y1 x2,y2 x3,y3”

图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），在连接（x3,y3），再连接（x4,y4），最后首尾相连（连接起点x1，y1），最终形成闭合的图形。

多边形效果图

在这里插入图片描述

多边形源代码

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500"  height="250"><polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 
</body>
</html>

SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大
SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 JavaScript 技术一起运行 SVG 是开放的标准
SVG文件是纯粹的 XML SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。