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

二：JavaScript中SVG API編程演示
創建與獲取SVG對象
代碼如下:
// 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中創建一個矩形圖形：
代碼如下:
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中實現文本繪制：
代碼如下:
// 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對象上實現鼠標點擊事件處理與MouseUp事件處理：
代碼如下:
// mouse event handling
c1.addEventListener("click",changeColor,false);
c2.addEventListener("mouseup", changeColor,false);

通過SVG 圖形濾鏡實現高斯模糊：
代碼如下:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com