基于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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
js闭包学习心得总结
Apr 17 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue实现同时设置多个倒计时
May 20 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
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
react-router实现按需加载
2017/05/09 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
用python实现的线程池实例代码
2018/01/06 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python3多线程知识点总结
2019/09/26 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
信用社竞聘演讲稿
2014/05/16 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014年政工师工作总结
2014/12/18 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
二胎满月酒致辞
2015/07/29 职场文书
导游词之西递宏村
2019/12/10 职场文书