html5 svg特性,HTML5 十大新特性(五)——SVG绘图(示例代码)

相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用document.createElementNS(‘http://www.w3.org/2000/svg‘,‘标签名‘)；SVG元素的nodeName都是纯小写形式。

一、使用方法

在HTML文件中直接使用SVG相关标签()即可，默认是一个300*150的inline-block。

二、绘制不同图形(部分)

1、绘制矩形

2、绘制圆形

3、绘制椭圆

4、绘制直线

5、绘制折线

6、绘制多边形

7、绘制文本

8、绘制图像

9、特效对象——渐变特效

10、特效对象——高斯模糊滤镜