基于SVG的web页面形绘制API介绍及编程演示

SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG PNG GIF等)有很大的差别下面与大家分享下JavaScript中SVG API编程演示感兴趣的朋友可以参考下哈 ? 一什么是SVG SVG是由W C发布的 D图形描述语言纯基于XML格式的标记语言 SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG PNG GIF等)有很大的差别 SVG是 D图形开发平台包括两个部分一个是基于XML语言的数据描述另外一部分是可编程的API 其关键特性支持图形文本梯度填充画笔风格图形特效滤镜如高斯模糊会在稍后的代码中演示同时还支持各种鼠标事件与DOM部分API 几乎所有的主流浏览器都支持SVG图形格式的现实与绘制 IE +以上也开始支持SVG 在低版本的IE中需要插件支持更多了解SVG访问这里 二 JavaScript中SVG API编程演示 创建与获取SVG对象复制代码代码如下: // create svg object var mySvg = document createElementNS(" "svg"); mySvg setAttribute("version" " ");// IE + support SVG version mySvg setAttribute("baseProfile" "tiny"); container appendChild(mySvg); 在SVG中创建一个矩形图形复制代码代码如下: var c = document createElementNS(" "rect"); c setAttribute("x" " "); c setAttribute("y" " "); c setAttribute("width" " "); c setAttribute("height" " "); c setAttribute("fill" "rgb( )"); c setAttribute("stroke" "rgb( )"); c setAttribute("stroke width" " "); mySvg appendChild(c ); 在SVG中实现文本绘制复制代码代码如下: // SVG draw text var stext = document createElementNS(" "text"); stext setAttribute("x" " "); stext setAttribute("y" " "); stext setAttribute("font size" " px"); stext setAttribute("fill" "#FF "); var textString = document createTextNode("Hello SVG"); stext appendChild(textString); mySvg appendChild(stext); 在SVG对象上实现鼠标点击事件处理与MouseUp事件处理复制代码代码如下: // mouse event handling c addEventListener("click" changeColor false); c addEventListener("mouseup" changeColor false); 通过SVG 图形滤镜实现高斯模糊复制代码代码如下: <div id="blur image demo"> <div id="left" ><img src=woniu png alt="Original image" width= height= ></div> <div id="right" > <svg xmlns=" <defs> <filter id="f " x=" " y=" "> <feGaussianBlur in="SourceGraphic" stdDeviation=" " /> </filter> </defs> <image x=" " y=" " width= height= xlink:href="woniu png" filter="url(#f )"/> </svg> </div> </div> 运行效果 ? 源代码可以copy直接运行 JavaScript部分复制代码代码如下: window onload = function() { // get DIV var container = document getElementById("svgContainer"); // create svg object var mySvg = document createElementNS(" "svg"); mySvg setAttribute("version" " ");// IE + support SVG version mySvg setAttribute("baseProfile" "tiny"); container appendChild(mySvg); // create svg shape rectangle var c = document createElementNS(" "rect"); c setAttribute("x" " "); c setAttribute("y" " "); c setAttribute("width" " "); c setAttribute("height" " "); c setAttribute("fill" "rgb( )"); c setAttribute("stroke" "rgb( )"); c setAttribute("stroke width" " "); mySvg appendChild(c ); // create svg shape circle var c = document createElementNS(" "circle"); c setAttribute("cx" " "); c setAttribute("cy" " "); c setAttribute("r" " "); c setAttribute("fill" "# "); c setAttribute("stroke" "#AA FF"); c setAttribute("stroke width" " "); mySvg appendChild(c ); // create svg shape ellipse var c = document createElementNS(" "ellipse"); c setAttribute("cx" " "); c setAttribute("cy" " "); c setAttribute("rx" " "); c setAttribute("ry" " "); c setAttribute("fill" "#FF "); c setAttribute("stroke" "purple"); c setAttribute("stroke width" " "); mySvg appendChild(c ); // create svg shape draw lines for(var i= ; i< ; i++) { var sline = document createElementNS(" "line"); var x = + i* ; console log(x ); sline setAttribute("x " x toString()); sline setAttribute("y " " "); sline setAttribute("x " x toString()); sline setAttribute("y " " "); sline setAttribute("stroke" "rgb( )"); sline setAttribute("stroke width" " "); mySvg appendChild(sline); } // SVG draw text var stext = document createElementNS(" "text"); stext setAttribute("x" " "); stext setAttribute("y" " "); stext setAttribute("font size" " px"); stext setAttribute("fill" "#FF "); var textString = document createTextNode("Hello SVG"); stext appendChild(textString); mySvg appendChild(stext); // mouse event handling c addEventListener("click" changeColor false); c addEventListener("mouseup" changeColor false); }; function changeColor(evt) { var target = evt target; target setAttributeNS(null "fill" "green"); } HTML部分复制代码代码如下: <> <head> <title>Gloomyfish SVG Demo</title> <style> #svgContainer { width: px; height: px; background color:#EEEEEE; } #left { float: left;} #right { float: right;} </style> </head> <body> <div id="svgContainer"></div> <div id="blur image demo"> <div id="left" ><img src=woniu png alt="Original image" width= height= ></div> <div id="right" > <svg xmlns=" <defs> <filter id="f " x=" " y=" "> <feGaussianBlur in="SourceGraphic" stdDeviation=" " /> </filter> </defs> <image x=" " y=" " width= height= xlink:href="woniu png" filter="url(#f )"/> </svg> </div> </div> </body> </> ? lishixinzhi/Article/program/Java/JSP/201311/20558