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


Posted in Javascript onJune 28, 2013

一:什么是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>

运行效果:
基于SVG的web页面图形绘制API介绍及编程演示 
源代码,可以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>
Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 #Javascript
jquery中通过父级查找进行定位示例
Jun 28 #Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
JavaScript操纵窗口的方法小结
Jun 28 #Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
js获取当前日期代码适用于网页头部
Jun 27 #Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 #Javascript
You might like
sphinx增量索引的一个问题
2011/06/14 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
测绘工程系学生的自我评价
2013/11/30 职场文书
数字化校园建设方案
2014/05/03 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers