看到一些炫酷的动画，总有种好想实现它，但是又无奈于腹中的代码量略少，只好不明觉厉，圆圆的大眼睛里满是对新事物的渴求。
在网页中嵌入动画，过去比较流行采用falsh、java applet和微软的silverlight，但他们的网页安全性、兼容性、难操作性以及文件的大小等缺陷让很多web开发者又爱又恨。gif依旧是个不错的选择，但遗憾的是并不能用dom操控其中的元素。自从有了svg、html5和css3，一些简单的平面动画的实现变得方便和简单，虽然他们在一些方面譬如兼容性和可操作性等依然未能完全尽人意，但是足以让web开发者兴奋不已，于是“优雅降级”和“渐进增强”等思想大行其道。在web绘图方面比较nb的还有webgl，它可以在页面中渲染出炫酷的三维动画图，但其原生的接口学习曲线较陡，而且webgl开发人员需要一定的图形学基础，入门门槛较高，于是，一些封装了webgl原生接口的框架层出不穷，其中最有名的应该要数three.js。本文准备以svg和javascript做一个比较炫酷的demo，让浏览器自动渲染出满天星辰。（不要问我ie8及其以下的浏览器啥都木有加载出来，这是因为svg只能兼容ie9以上和其他主流浏览器。然而这并不能阻挡svg的魅力~）
这是我们想要做出的效果。
一. 先创建一个svg画布
在这里，我们将一颗星星画出来，用多边形创建，路径为points=0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2。我们打算通过use属性，将这个星星元素复制好多好多份并置入中，这个可以用javascript循环来实现。
在css中，我们首先绘制深邃的蓝色天空，并且希望页面全屏无滚动条。css代码如下：
html, body {margin: 0; padding: 0; width: 100%; height: 100%; background: #012; font-size: 0; line-height: 0;}
二. 编写javascript代码
直接上代码：
window.onload=function () {// 页面加载完毕后，执行满天星辰的渲染rederstar();}// svg元素的命名空间var svgns = http://www.w3.org/2000/svg;var xlink_ns = http://www.w3.org/1999/xlink;// 将use属性封装成函数，以便调用function use(origin) {var _use = document.createelementns(svgns, use);_use.setattributens(xlink_ns, xlink:href, # + origin.id);return _use;}// 创建任意两个数之间的随机数function random(min, max) {return min + (max - min) * math.random();}// 绘制满天星星function rederstar() {// 获取星星原型和装载满天星星的容器star-groupvar starref = document.getelementbyid(star);var stargroup = document.getelementbyid(star-group);// 星星的总数量var starcount = 500;// 循环，画出 starcount 个星星for(var i = 1; i < starcount; i++) {// star引用starref原型var star;star = use(starref);// 让星星的透明度、位置和大小随机变化star.setattribute(opacity, random(0.1, 0.4));star.setattribute(transform, translate( + random(-1000, 1000) + , + random(-400, 400) + ) + scale( + random(0.1, 0.6) + ));// 将绘制好星星置入stargroup的dom子元素中stargroup.appendchild(star);}}
see the pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://codepen.io/dengzhirong/pen/zgkkxd/ data-ke-src=http://codepen.io/dengzhirong/pen/zgkkxd/&amp;amp;amp;amp;amp;amp;amp;amp;gt;zgkkxd&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by dengzhirong (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://codepen.io/dengzhirong data-ke-src=http://codepen.io/dengzhirong&amp;amp;amp;amp;amp;amp;amp;amp;gt;@dengzhirong&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://codepen.io data-ke-src=http://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;gt;codepen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;.
额，值得注意的是，获得两个数之间的随机数，一般都采用这种方法：min + (max - min) * math.random()。
动态创建svg元素，需要加上命名空间http://www.w3.org/2000/svg；动态创建的svg元素的xlink链接属性，也需要加上命名空间http://www.w3.org/1999/xlink。
值得完善的地方有：
1. 这里向html中插入了500个dom元素，然而每一次dom元素的改变都会引起页面加载速度的较大降低，有待优化。可以考虑使用creatdocumentfragment，或者用字符串存储新建的dom文本，然后再一次性插入html中。
2. 星群的绘制范围与svg的宽高以及viewbox的取值影响较大，耦合度略高。(希望路过的高手能给我一些指点~ )
here is the demo.(2kb)
三. 来点好玩的
只有星星的夜空略单调。我们可以考虑加点文艺的绘画元素上去。
本来想自己用ai画点什么的，奈何我的ai抽风，所以就拿了不知哪位大牛的svg裸图来用一下。修改一下源码，增加了一些迎风吹拂的动画效果。
here is the svg.(5kb)
额，一般来说，简单的图形可以用svg代码直接敲出来。但对于一些复杂的svg路径，建议用ai或者svg-edit绘图后另存为svg格式，再抽取其中path节点放入我们所要编辑的svg文件中，然后再修改其中的填充属性或者增添动画效果什么的。
在html中插入svg文件。方法有几种，可参考http://www.w3school.com.cn/svg/svg_inhtml.asp。我比较习惯将svg图片作为背景图片插入。
最后，再修改一下样式，就大功告成了。
效果如下：
see the pen &amp;amp;amp;amp;amp;lt;a href=http://codepen.io/dengzhirong/pen/yxvvev/ data-ke-src=http://codepen.io/dengzhirong/pen/yxvvev/&amp;amp;amp;amp;amp;gt;yxvvev&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by dengzhirong (&amp;amp;amp;amp;amp;lt;a href=http://codepen.io/dengzhirong data-ke-src=http://codepen.io/dengzhirong&amp;amp;amp;amp;amp;gt;@dengzhirong&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href=http://codepen.io data-ke-src=http://codepen.io&amp;amp;amp;amp;amp;gt;codepen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.
here is the demo.(7kb)