您的位置：首页 > Web前端 > JavaScript

SVG与html的交互(svg的js与html的js互调用)

2010-12-06 17:54 330 查看
这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。

在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。



svg文档以嵌入在html文档中运行。



例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。



svg文件的代码：

//文件名：Svg&HtmlInteractive.svg

<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" onload="init(evt)" onclick="Click(evt)">
<mce:script type="text/javascript"><!--
var svgDoc = null ;
var svgRoot = null ;
var parentWnd = null ; //保存html的window对象
//初始化
function init(evt)
{
  svgDoc = evt.target.ownerDocument ;
  svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到
  parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法
  if(parentWnd.document.title == null || parentWnd.document.title == '')
  {
    alert("请不要直接在浏览器中打开‘svg’文档！");
    //下面的代码作用是不提示确认关闭窗口
    parentWnd.opener = null ;
    parentWnd.open('', '_self') ;
    parentWnd.close() ;
  }
  svgDoc.svgWnd = window ; //这里人为进行设定，以便在html中的第一种交互方式中可以取的到svg的window对象
}
function FunCallByHtmlJs()
{
  alert('这个消息框是在html的js中调用svg的js函数产生的。') ;
}
function Click(evt)
{
  var id = evt.target.id ;
  if(id == 'rect') //单击在矩形上，而不是背景上时
  {
    if(parentWnd)
    {
      parentWnd.txt.value = '在svg中设置html中的text的文本内容' ;
      parentWnd.FunCallBySvgJs() ; //调用html中的js函数
    }
  }
}
// --></mce:script>
  <rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />
  <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
  <text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text>
</svg>






html文件的代码：

//文件名：Svg&HtmlInteractive.html

<html>
<head>
  <title>SVG与html的交互</title>
</head>
<body onload="htmInit()">
<mce:script type=text/javascript><!--
var svgDoc = null ;
var svgRoot = null ;
var svgWnd = null ; //svg的window对象
function htmInit()
{
  txt.value = '' ;
}
function FunCallBySvgJs()
{
  alert('这个消息框是在svg的js中调用html的js函数产生的。') ;
}
function Btn1Clk()
{
  //第一种方式
  svgDoc = emSvg.getSVGDocument() ;
  if(svgDoc == null) return ;
  svgRoot = svgDoc.documentElement ;
  if(svgRoot == null) return ;
  var rect = svgRoot.getElementById('rect') ;
  if(rect) rect.setAttribute('fill', 'blue') ;
  svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的
  if(svgWnd) svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
}
function Btn2Clk()
{
  //第二种方式
  svgWnd = emSvg.window ;
  if(svgWnd == null) return ;
  svgRoot = svgWnd.svgRoot ; //svgRoot在svg的js中是个全局的变量
  if(svgRoot == null) return ;
  var rect = svgRoot.getElementById('rect') ;
  if(rect) rect.setAttribute('fill', 'red') ;
  svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
}
// --></mce:script>
<input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" />
<input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" />
<input id="txt" type="text" value="" />
<embed id="emSvg" src="Svg&HtmlInteractive.svg" mce_src="Svg&HtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
</body>
</html>




效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航