SVG对象：延迟获取

引入一个SVG文件：

<embed id="mySVG" src="map.svg" type="image/svg+xml" />

这样就能在浏览器中看到SVG的图。

然而 ，要想在js中直接获取到SVG的对象：

svgDoc = document.getElementById("mySVG").getSVGDocument();

却会提示svgDoc为null。即使将该行代码放在ready函数中，也是同样的结果。

这是因为SVG的加载是需要时间的。js中的代码执行时，SVG还未加载完成，所以获取到的对象就是null。若打开一个SVG页面，等看到图后，将该行代码放在浏览器的控制台中执行，会发现能正常获取对象。

因此，要获取SVG对象，就要等SVG加载完成。考虑到SVG加载的时间并不一定，所以使用循环的方式来延迟获取：

var svgDoc = null;
var time = null;
// 载入SVG
var loadSvg = function() {
	svgDoc = document.getElementById("mySVG").getSVGDocument();
	if(svgDoc == null) {
		time = setTimeout("loadSvg()", 300);
	} else {
		clearTimeout(time);
		loadCallback();
	}
};

// 载入回调
var loadCallback = function() {
	console.log("加载完成");
};

$(function() {
	// 延迟加载
	setTimeout("loadSvg()", 300);	
});

如上。先等待300ms再获取SVG对象。若获取到的SVG对象是null，则等待300ms再次获取。重复该步骤，直到获取的SVG对象不是null。

特别注意对chrome浏览器而言，必须使用http的方式来访问页面时，getSVGDocument()函数才会生效。若直接用本地文件的方式打开，则getSVGDocument()函数会返回null。