svg与html的交互

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

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

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

parentWnd = window.parent;

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

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

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

一下是我写的一个demo

点击矩形框，可以获取当前的颜色显示在下面的“the current color is:”后面。
点击按钮可以设置矩形框的颜色。
源码在下面的  svg.zip里面

评论

2 楼 happybruce 2013-05-07  

下载后确实颜色不改变呀

1 楼 ssntingyu 2012-08-01  

为什么点击后颜色不改变呢？：