基于SVG的web頁(yè)面圖形繪制API介紹及編程演示_javascript技巧

一：什么是SVG
SVG是1999由W3C發(fā)布的2D圖形描述語(yǔ)言，純基于XML格式的標(biāo)記語(yǔ)言，SVG的
全稱是可擴(kuò)展的矢量圖形跟傳統(tǒng)的Raster方式的圖形(JPG, PNG, GIF等)有很大的差
別。SVG是2D圖形開發(fā)平臺(tái)，包括兩個(gè)部分，一個(gè)是基于XML語(yǔ)言的數(shù)據(jù)描述，另
外一部分是可編程的API，其關(guān)鍵特性支持圖形，文本，梯度填充，畫筆風(fēng)格，圖形
特效濾鏡如高斯模糊，會(huì)在稍后的代碼中演示。同時(shí)還支持各種鼠標(biāo)事件與DOM部
分API。幾乎所有的主流瀏覽器都支持SVG圖形格式的現(xiàn)實(shí)與繪制，IE9+以上也開始
支持SVG，在低版本的IE中需要插件支持。
更多了解SVG訪問這里：http://www.w3.org/Graphics/SVG/About.html

二：JavaScript中SVG API編程演示
創(chuàng)建與獲取SVG對(duì)象
代碼如下:
// create svg object
var mySvg = document.createElementNS("http://www.w3.org/2000/svg","svg");
mySvg.setAttribute("version","1.2");// IE9+ support SVG 1.1 version
mySvg.setAttribute("baseProfile","tiny");
container.appendChild(mySvg);

在SVG中創(chuàng)建一個(gè)矩形圖形：
代碼如下:
var c1 = document.createElementNS("http://www.w3.org/2000/svg","rect");
c1.setAttribute("x","20");
c1.setAttribute("y","20");
c1.setAttribute("width","150");
c1.setAttribute("height","150");
c1.setAttribute("fill","rgb(0,0,255)");
c1.setAttribute("stroke","rgb(0,0,0)");
c1.setAttribute("stroke-width","4");
mySvg.appendChild(c1);

在SVG中實(shí)現(xiàn)文本繪制：
代碼如下:
// SVG draw text
var stext = document.createElementNS("http://www.w3.org/2000/svg","text");
stext.setAttribute("x","700");
stext.setAttribute("y","100");
stext.setAttribute("font-size","18px");
stext.setAttribute("fill","#FF0000");
var textString = document.createTextNode("Hello SVG");
stext.appendChild(textString);
mySvg.appendChild(stext);

在SVG對(duì)象上實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊事件處理與MouseUp事件處理：
代碼如下:
// mouse event handling
c1.addEventListener("click",changeColor,false);
c2.addEventListener("mouseup", changeColor,false);

通過SVG 圖形濾鏡實(shí)現(xiàn)高斯模糊：
代碼如下:

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com