(原)Html5之Svg对象的构造方法

rainsilence

浏览: 160761 次
性别:
来自: 上海

最近访客更多访客>>

zhang55090

iop118

cjh326419411

finit

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 EXT Chrome 互联网 Firefox

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上测试通过。

分享到：

（原）用java流方式判断文件类型 | (原)仿Http服务器下载响应

2010-07-27 15:05
浏览 6598
评论(2)
分类:Web前端
查看更多

2 楼 rainsilence 2010-08-03

你首先应该有个概念
Extjs是什么？
Ext.onReady是什么
Ext.MessageBox是什么

关于第二个问题，svg中的事件源应该是不一样的
关于第三个问题，Ext.MessageBox是Div啊。svg中没有DIV标签。

这样一来，解决方法也就只有一条路了。Extjs的代码必须全部写在HTML上

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function doClick() {
		document.svgFrame.getSVGDocument().test();
	}
</script>
</head>
<body>
	<input type="button" onclick="doClick();"></input>
	<embed type="image/svg+xml"  pluginspage=http://www.adobe.com/svg/viewer/install/ align="top"  name="svgFrame" id="svgFrame" src="svg/first.svg" height="400px" width="300px"></embed>
</html>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
	width="300" height="400" onload="init(evt)">
	<script type="text/javascript">
	<![CDATA[
		function init(event) {
			var svgDoc = event.target.ownerDocument;
			var svgRoot = svgDoc.rootElement;
			svgDoc.test = test;
		}
		
		function test() {
			alert("test");
		}
	]]>
	</script>
	<line x1="20" y1="20" x2="70" y2="20" style="stroke:black"/>
	<line x1="20" y1="20" x2="70" y2="70" stroke="black"/>
</svg>

以上代码在FF上测试通过。但是在Chrome上测试失败。如果要全部支持，现阶段建议采用无实体svg的构造法

1 楼 tutu66 2010-08-02

看了一下您的代码，大致意思是在没有svg实体文件作为载体的情况下动态创建类似dom节点的方式加入到html节点中

但如果需求是必须以svg实体文件为载体来运行脚本，像这样：
aa.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>SVG DEMO</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
 <body>
  		<embed id="svgBox" src="bb.svg" width="100%" height="100%">
  </body>
</html>

bb.svg

<svg xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	baseProfile="full">
	<!--初始化脚本-->
	<script>
		<![CDATA[
        Ext.onReady(function() {      
             
            //数据连接      
            var conn =new Ext.data.Connection({      
                autoAbort: false,      
                disableCaching: false,      
                extraParams: { name: "姓名", password: "密码" },      
                method: "GET",      
                timout: 300,      
                url: 'Ext_Info1.aspx'     
     
            });      
     
     
            //发送请求      
            conn.request({      
            success: function(response) { Ext.MessageBox.alert("info", response.responseText) },      
            failure: function() { Ext.MessageBox.alert("连接失败"); }      
     
            });      
     
        });   
		]]>
	</script>
	<defs>
	</defs>
		<rect id="__root" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"> /
</svg>

此方法完全加载不起来，ext在svg中失效，如果把ext的逻辑代码移动到aa.html中去处理，又不能控制bb.svg中的东西，其实就是解决aa可以访问bb的document的问题，请指教

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论