基于SVG的web页面图形绘制API介绍

http://blog.csdn.net/jia20003/article/details/9185449

一：什么是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 图形滤镜实现高斯模糊：

[html]  view plain copy

1.       <div id="blur-image-demo">  
2.         <div id="left" style="width:20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>  
3.         <div id="right" style="width:80%;">  
4.         <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
5.           <defs>  
6.             <filter id="f1" x="0" y="0">  
7.               <feGaussianBlur in="SourceGraphic" stdDeviation="5" />  
8.             </filter>  
9.           </defs>  
10.           <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/>  
11.         </svg>  
12.     </div>   
13. </div>  

运行效果：

源代码，可以copy直接运行

JavaScript部分

[javascript]  view plain copy

1.         window.onload = function() {  
2.             // get DIV  
3.             var container = document.getElementById("svgContainer");  
4.   
5.             // create svg object  
6.             var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");  
7.             mySvg.setAttribute("version", "1.2");// IE9+ support SVG 1.1 version  
8.             mySvg.setAttribute("baseProfile", "tiny");  
9.             container.appendChild(mySvg);  
10.               
11.             // create svg shape - rectangle  
12. var c1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");  
13.             c1.setAttribute("x", "20");  
14.             c1.setAttribute("y", "20");  
15.             c1.setAttribute("width", "150");  
16.             c1.setAttribute("height", "150");  
17.             c1.setAttribute("fill", "rgb(0,0,255)");  
18.             c1.setAttribute("stroke", "rgb(0,0,0)");  
19.             c1.setAttribute("stroke-width", "4");  
20.             mySvg.appendChild(c1);  
21.               
22.             // create svg shape - circle  
23.             var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");  
24.             c2.setAttribute("cx", "250");  
25.             c2.setAttribute("cy", "100");  
26.             c2.setAttribute("r", "60");  
27.             c2.setAttribute("fill", "#996699");  
28.             c2.setAttribute("stroke", "#AA99FF");  
29.             c2.setAttribute("stroke-width", "7");  
30.             mySvg.appendChild(c2);  
31.               
32.             // create svg shape - ellipse  
33.             var c3 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");  
34.             c3.setAttribute("cx", "450");  
35.             c3.setAttribute("cy", "100");  
36.             c3.setAttribute("rx", "100");  
37.             c3.setAttribute("ry", "50");  
38.             c3.setAttribute("fill", "#FF0000");  
39.             c3.setAttribute("stroke", "purple");  
40.             c3.setAttribute("stroke-width", "3");  
41.             mySvg.appendChild(c3);  
42.               
43.             // create svg shape - draw lines  
44.             for(var i=0; i<10; i++)  
45. {  
46.                 var sline = document.createElementNS("http://www.w3.org/2000/svg", "line");  
47.                 var x1 = 580 + i*10;  
48.                 console.log(x1);  
49.                   
50.                 sline.setAttribute("x1", x1.toString());  
51.                 sline.setAttribute("y1", "10");  
52.                 sline.setAttribute("x2", x1.toString());  
53.                 sline.setAttribute("y2", "180");  
54.                 sline.setAttribute("stroke", "rgb(0,255,0)");  
55.                 sline.setAttribute("stroke-width", "2");  
56.                 mySvg.appendChild(sline);  
57. }  
58.               
59.         // SVG draw text  
60.         var stext = document.createElementNS("http://www.w3.org/2000/svg", "text");  
61.         stext.setAttribute("x", "700");  
62.         stext.setAttribute("y", "100");  
63.         stext.setAttribute("font-size", "18px");  
64.         stext.setAttribute("fill", "#FF0000");  
65.         var textString = document.createTextNode("Hello SVG");  
66.         stext.appendChild(textString);  
67.         mySvg.appendChild(stext);  
68.               
69.             // mouse event handling  
70.             c1.addEventListener("click", changeColor, false);  
71.             c2.addEventListener("mouseup", changeColor, false);  
72.         };  
73.           
74.         function changeColor(evt) {  
75.             var target = evt.target;  
76.             target.setAttributeNS(null, "fill", "green");  
77.         }  

HTML部分：

[html]  view plain copy

1. <html>  
2.     <head>  
3.         <title>Gloomyfish SVG Demo</title>  
4.           
5.         <style>  
6.             #svgContainer {  
7.                 width:800px;  
8.                 height:200px;  
9.                 background-color:#EEEEEE;  
10.             }  
11.               
12.             #left { float: left;}   
13.             #right { float: right;}   
14.         </style>         
15.     </head>  
16.     <body>  
17.         <div id="svgContainer"></div>  
18.         <div id="blur-image-demo">  
19.             <div id="left" style="width:20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>  
20.             <div id="right" style="width:80%;">  
21.                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
22.                   <defs>  
23.                     <filter id="f1" x="0" y="0">  
24.                       <feGaussianBlur in="SourceGraphic" stdDeviation="5" />  
25.                     </filter>  
26.                   </defs>  
27.                   <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/>  
28.                 </svg>  
29.             </div>   
30.         </div>  
31.     </body>  
32. </html>  

转载请务必注明出处