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

时间：2022-05-31 09:14:32

转自: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 图形滤镜实现高斯模糊：

  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>

运行效果：

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

源代码，可以copy直接运行

JavaScript部分

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

HTML部分：

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

转载请务必注明出处

相关文章