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

最新推荐文章于 2024-05-09 14:56:00 发布

Yeah

最新推荐文章于 2024-05-09 14:56:00 发布

阅读量3.7k

点赞数

分类专栏： SVG专题文章标签： html function null button 文档 encoding

本文链接：https://blog.csdn.net/xuezhimeng/article/details/6058973

版权

SVG专题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个例子显示了，在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%" οnlοad="init(evt)" οnclick="Click(evt)"> <mce:script type="text/javascript"></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 οnlοad="htmInit()"> <mce:script type=text/javascript></mce:script> <input type="button" value="设置svg中矩形的填充颜色为蓝色" οnclick="Btn1Clk()" /> <input type="button" value="设置svg中矩形的填充颜色为红色" οnclick="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>

效果图：

Yeah

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
SVG与html的交互(svg的js与html的js互调用)

<br />这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。<br />在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。<br /> <br />svg文档以嵌入在html文档中运行。<br /> <br />例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。<br /> <br />svg文件的代码：
复制链接

扫一扫