JavaScript获得SVG的DOM

看这篇前，请先看下我的前两篇博文“SVG 图形嵌入html页面”和“在SVG中使用JavaScript”（篇幅较短）。

这篇的基础环境都在这两篇博文。

如果你之前用过JavaScript操纵过html的DOM，想必对document这个变量特别眼熟。

这里如果在JavaScript脚本中直接使用document的话，对应的不是html的DOM，而是SVG的。

有个注意点是：如果在脚本的开始就使用document，有时候document会是空。

我在网络上搜索一番，得到的解答是：因为svg需要绘制时间，如果过早使用document有可能得到空。

我找到两个解决办法，推荐第二种：

1.setTimeout("t()",1000);

等待1秒钟后调用方法t(),这是JavaScript代码，t()方法中包含的是需要运行的JavaScript脚本，当然也包含了对document的使用。

一秒钟，网络状况还可以的话，一般够SVG的绘制时间了。

2.<svg οnlοad="begin()" >

svg文档中的代码，在svg标签中加入（上面的代码去除了一些）οnlοad="init(evt)".

当svg加载好后就会调用init(evt)方法，这是一个JavaScript方法。

JavaScript脚本：

function init(evt) {
    svgDoc = evt.target.ownerDocument;
    svgRoot = svgDoc.rootElement;
}

 

evt指onload Event事件