zoukankan      html  css  js  c++  java
  • 基于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="20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>  
    3.         <div id="right" style="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.                 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="20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>  
    20.             <div id="right" style="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>  

    转载请务必注明出处

  • 相关阅读:
    HDU 5791 Two (DP)
    POJ 1088 滑雪 (DPor记忆化搜索)
    LightOJ 1011
    POJ 1787 Charlie's Change (多重背包 带结果组成)
    HDU 5550 Game Rooms (ccpc2015 K)(dp)
    HDU 5542 The Battle of Chibi (ccpc 南阳 C)(DP 树状数组 离散化)
    HDU 5543 Pick The Sticks (01背包)
    HDU 5546 Ancient Go (ccpc2015南阳G)
    NB-IoT的DRX、eDRX、PSM三个模式 (转载,描述的简单易懂)
    MQTT 嵌入式端通讯协议解析(转)
  • 原文地址:https://www.cnblogs.com/sunjie9606/p/5168676.html
Copyright © 2011-2022 走看看