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相關標簽(<svg></svg>)即可，默認是一個300*150的inline-block。

　　二、繪制不同圖形(部分)

　　　　1、繪制矩形

　　　　<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>

　　　　2、繪制圓形

　　　　<circle [r/cx/cy]></circle>

　　　　3、繪制橢圓

　　　　<ellipse [rx/ry/cx/cy]></ellipse>

　　　　4、繪制直線

　　　　<line [x1/y1/x2/y2/stroke]></line>

　　　　5、繪制折線

　　　　<polyline [points/stroke]></polyline>

　　　　6、繪制多邊形

　　　　<polygen [points]></polygen>

　　　　7、繪制文本

　　　　<text [x/y/font-size/alignment-baseline/fill]></text>

　　　　8、繪制圖像

　　　　<image [width/height/xlink:href]></image>

　　　　9、特效對象——漸變特效

　　　　<defs>

　　　　　　<linearGradient [x1/y1/x2/y2]>

　　　　　　　　<stop [offset/stop-color]></stop>

　　　　　　</linearGradient>

　　　　</defs>

　　　　10、特效對象——高斯模糊濾鏡

　　　　<defs>

　　　　　　<filter>

　　　　　　　　<feGaussionBlur [stdDeviation]>

　　　　　　</filter>

　　　　</defs>