S V G(可放缩的矢量图形)是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。
W3C是作为一个国际X的工业联盟而创建的, 目的是领导整个互联网协作的发展和创新, 以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商, 如Adobe、苹果、Aut0De sk、Bit Fla sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、S un、V i S i 0、施乐等,所以SVG不是一个私有格式,而是一个开放的标准。也就是说,它并不属于任何个体的专利,而是一个通过协作、共同开发的工业标准。正是因为这点,才使得SVG能够得到更迅速的开发和应用。
但是传统的svg只能通过<object>标签引入
<object type="image/svg+xml" data="****/data.svg" width="20px" height="20px"></object>
也就是说,要在画面上动态创建svg图像在这一标准上是很困难的。
翻阅了很多资料后,发现国外的framework中,针对data属性,做了些改进
将data:image/svg+xml,+svg标签内容后,也可以显示出svg图像。
这使得动态创建svg图像成为了可能
于是,我试着创建了以下类
(function() {
var userAgent = navigator.userAgent;
var isWebKit = /webkit/i.test(userAgent);
SvgHelper = function(containerId, width, height) {
this.container = document.getElementById(containerId);
this.width = parseInt(width) + 'px';
this.height = parseInt(height) + 'px';
this.svg = '<?xml version="1.0" encoding="utf-8"?>'+
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" '+
'xmlns:xlink="http://www.w3.org/1999/xlink" width="' +
this.width + '" height="' + this.height + '">';
};
SvgHelper.prototype = {
/**
* 构造SVG
*/
getSvg: function() {
if (this.svgObject) {
return this.svgObject;
}
this.svgObject = createElement('object', {
width: this.width,
height: this.height,
type: 'image/svg+xml'
}, {
position : "ABSOLUTE",
left: 0,
top: 0
}, this.container);
},
/**
* 测试函数
*/
drawCircle: function() {
this.getSvg();
this.svg += "<rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"50\" fill=\"green\" stroke=\"red\"/>";
},
/**
* 重绘
*/
repaint: function() {
var svgObject = this.getSvg();
svgObject.data = 'data:image/svg+xml,'+ this.svg +'</svg>';
if (isWebKit) this.container.appendChild(svgObject);
}
};
function createElement(tagName, tagProp, tagStyle, container) {
var tagElement = document.createElement(tagName);
if (tagProp) {
for (var prop in tagProp) {
tagElement[prop] = tagProp[prop];
}
}
if (tagStyle) {
for (var prop in tagStyle) {
tagElement.style[prop] = tagStyle;
}
}
if (container) {
container.appendChild(tagElement);
}
return tagElement;
}
})();
在window.onload中
var help = new SvgHelp("container", 200, 200);
help.drawCircle();
help.repaint();
在firefox中可以正确显示出图形。而在chrome中却不行。但是如果将container.appendChild改成document.body.appendChild,又能正确的显示。。。
查阅了若干资料后,终于作罢。因为发现了html5中,对于svg标准又有了新的定义。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="js/svghelper.js"></script>
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById('container');
var svgns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgns, 'svg');
svg.setAttribute('width', '300px');
svg.setAttribute('height', '300px');
// our linearGradient
var defs = document.createElementNS(svgns, 'defs');
var gradient = document.createElementNS(svgns, 'linearGradient');
gradient.setAttribute('id', 'myGradient');
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '100%');
gradient.setAttribute('x2', '100%');
gradient.setAttribute('y2', '0%');
var stop = document.createElementNS(svgns, 'stop');
stop.setAttribute('offset', '5%');
stop.setAttribute('stop-color', 'red');
gradient.appendChild(stop);
stop = document.createElementNS(svgns, 'stop');
stop.setAttribute('offset', '95%');
stop.setAttribute('stop-color', 'blue');
stop.setAttribute('stop-opacity', '0.5');
gradient.appendChild(stop);
defs.appendChild(gradient);
svg.appendChild(defs);
// our example circle
var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('cx', '50%');
circle.setAttribute('cy', '50%');
circle.setAttribute('r', 100);
circle.setAttribute('fill', 'url(#myGradient)');
circle.setAttribute('stroke-color', 'red');
circle.addEventListener('mousedown', function() {
alert('hello');
}, false);
svg.appendChild(circle);
container.appendChild(svg);
};
</script>
<body>
<div id="container">
</div>
</body>
</html>
用带ns的createElement方法,可以轻松的创建出svg对象,而无需object标签。
以上代码在Firefox和chrome上测试通过。
分享到:
相关推荐
本文将详细讲解HTML5面试题及答案,涵盖了HTML5的基本概念、HTML5中的新特性、Canvas和SVG图形的区别、CSS选择器、Web Workers、本地存储等多个方面。 一、HTML5的基本概念 * HTML5是什么?HTML5是最新的HTML标准...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...
本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习...
本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习...
本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习...
6.3.3 使用createdom方法生成dom对象 / 261 6.3.4 使用createtemplate方法创建模板 / 263 6.3.5 helper对象的使用方法 / 263 6.4 元素的操作 / 273 6.5 获取元素集合:ext.compositeelementlite与ext....
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....
动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个时间转换的问题,顺便谈谈搜索技巧 .net中的正则表达式使用高级技巧 (一) C#静态成员和...
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....
GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单,提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏,可在线玩。 public class JVMine extends java.applet....