SVG——新一代Web设计及互动媒体的革新
首页 支持与服务 SVG教程 Html5中SVG对象的构造方法

Html5中SVG对象的构造方法

Rainsilence 2010-09-16 来源:Javaeye

html 5 and SVGhtml 5中SVG对象的构造方法,传统SVG只能通过<embed>或<object>标签引入，所以要在画面上动态创建svg图像在这一标准上是很困难的。我们用带ns的createElement方法，可以轻松的创建出SVG对象，而无需object标签。

SVG(可放缩的矢量图形)是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、ViSi0、施乐等，所以SVG不是一个私有格式，而是一个开放的标准。也就是说，它并不属于任何个体的专利，而是一个通过协作、共同开发的工业标准。正是因为这点，才使得SVG能够得到更迅速的开发和应用。

但是传统的SVG只能通过<embed>或<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上测试通过。

(THe END)