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裏面