基于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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
纯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
Snoopy类使用小例子
2008/04/15 PHP
2014过年倒计时示例
2014/01/31 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Cookies 和 Session的详解及区别
2017/04/21 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
Python列表如何更新值
2020/05/27 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
道路建设实施方案
2014/03/18 职场文书
文明倡议书范文
2014/04/15 职场文书
真诚的求职信
2014/07/04 职场文书
2014年作风建设心得体会
2014/10/22 职场文书