svg与html的交互

[size=xx-large]1.写在前面[/size]
之前写到了svg与html的一种交互方式，那是将svg和html写在一个文档里面来进行的。
这么写让我很不爽，想一想，假如里面用到很多的svg元素，加上还有动画设置，js代码什么的不就有一大堆东西了么？虽然交互起来是方便了，不过那么多代码就这么刷下来，太夸张了。

昨天又在网上看了下，发现了一个比较好的。html文档和svg文档分开，元素之间通过获得彼此的document或者window来进行交互。

[size=xx-large]2.思路[/size]
说明：svg文档是通过embed标签引用在html里面
其实如果对js比较熟悉，这些应该很容易就能想到了，只是自己对js的确了解得太少，当初没敲几行js就跟着jquery混了。
[size=large]2.1 svg操作html的元素[/size]
key:获得引用svg文档的父窗口,也就是获得html的window
相关代码

parentWnd = window.parent;

window都获得了，那么还有什么事情干不了呢？
[size=large]2.2 html操作svg的元素[/size]
key:获得svg的document对象。
相关代码

var svgEle = document.getElementById("svgEle");//获得embed标签对象
var svgDoc = svgEle.getSVGDocument();//获得svg的document对象

这里OK了，那么剩下的操作就是发挥各自的想象力的事情了。

一下是我写的一个demo
[img]http://dl.iteye.com/upload/attachment/523741/690c63ea-e734-383b-9cc1-c62142d07abd.jpg[/img]
点击矩形框，可以获取当前的颜色显示在下面的“the current color is:”后面。
点击按钮可以设置矩形框的颜色。
源码在下面的 svg.zip里面