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

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

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

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

运行效果:

源代码,可以copy直接运行

JavaScript部分

            window.onload = function() {
              // get DIV
              var container = document.getElementById("svgContainer");
 
              // 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);
              
              // create svg shape - rectangle
        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);
              
              // create svg shape - circle
              var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
              c2.setAttribute("cx", "250");
              c2.setAttribute("cy", "100");
              c2.setAttribute("r", "60");
              c2.setAttribute("fill", "#996699");
              c2.setAttribute("stroke", "#AA99FF");
              c2.setAttribute("stroke-width", "7");
              mySvg.appendChild(c2);
              
              // create svg shape - ellipse
              var c3 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
              c3.setAttribute("cx", "450");
              c3.setAttribute("cy", "100");
              c3.setAttribute("rx", "100");
              c3.setAttribute("ry", "50");
              c3.setAttribute("fill", "#FF0000");
              c3.setAttribute("stroke", "purple");
              c3.setAttribute("stroke-width", "3");
              mySvg.appendChild(c3);
              
              // create svg shape - draw lines
              for(var i=0; i<10; i++)
        {
                var sline = document.createElementNS("http://www.w3.org/2000/svg", "line");
                var x1 = 580 + i*10;
                console.log(x1);
                
                sline.setAttribute("x1", x1.toString());
                sline.setAttribute("y1", "10");
                sline.setAttribute("x2", x1.toString());
                sline.setAttribute("y2", "180");
                sline.setAttribute("stroke", "rgb(0,255,0)");
                sline.setAttribute("stroke-width", "2");
                  mySvg.appendChild(sline);
        }
              
            // 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);
              
              // mouse event handling
              c1.addEventListener("click", changeColor, false);
              c2.addEventListener("mouseup", changeColor, false);
            };
            
            function changeColor(evt) {
                var target = evt.target;
                target.setAttributeNS(null, "fill", "green");
            }

HTML部分:

 <html>
    <head>
        <title>Gloomyfish SVG Demo</title>
        
        <style>
            #svgContainer {
                width:800px;
                height:200px;
                background-color:#EEEEEE;
            }
            
            #left { float: left;} 
      #right { float: right;} 
        </style>       
    </head>
    <body>
        <div id="svgContainer"></div>
        <div id="blur-image-demo">
          <div id="left" style="width:20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>
          <div id="right" style="width:80%;">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <defs>
            <filter id="f1" x="0" y="0">
              <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            </filter>
          </defs>
          <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/>
        </svg>
      </div> 
    </div>
    </body>
</html>
 

转载请务必注明出处

相关文章
|
5天前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
14 5
|
7天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
20 7
|
7天前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
27 3
|
18天前
|
开发框架 安全 .NET
使用VB.NET构建Web服务和REST API的指南
【7月更文挑战第2天】使用VB.NET构建Web服务和REST API的指南:从Web服务基础到ASP.NET Core实践,涵盖控制器、路由、模型绑定、安全措施(如JWT、HTTPS)及测试、部署(Azure、Docker)与监控工具。了解如何利用VB.NET在现代云环境中创建高效、安全的API。开始你的VB.NET Web服务开发之旅!**
17 1
|
6天前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
【7月更文挑战第14天】在Web开发中,AJAX和Fetch API扮演着关键角色,用于前后端异步通信。AJAX通过XMLHttpRequest实现页面局部更新,但回调模式和复杂API有一定局限。Fetch API作为现代替代,利用Promise简化异步处理,提供更丰富功能和错误处理。Python后端如Flask、Django支持这些交互,助力构建高性能应用。从AJAX到Fetch API的进步,结合Python,提升了开发效率和用户体验。
10 0
|
6天前
|
XML 前端开发 API
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
【7月更文挑战第14天】Web开发中,AJAX作为异步通信先驱,与新兴的Fetch API一起革新交互体验。Fetch基于Promise,简化了请求处理。Python后端,如Flask,提供稳定支撑。这三者的融合,推动Web应用达到新高度,实现高效、实时交互。通过示例展示,我们看到从发送请求到更新UI的流畅过程,以及Python如何轻松返回JSON数据。这种组合揭示了现代Web开发的潜力和魅力。
12 0
|
17天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
18天前
|
人工智能 前端开发 API
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
19 0
|
18天前
|
开发框架 JSON .NET
|
23天前
|
缓存 JavaScript 前端开发
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
12 0