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

SVG 与 HTML 的交互（SVG 的 JS 与 HTML 的 JS 互调用） 本文将详细介绍 SVG 与 HTML 之间的交互，包括如何在 HTML 中单击命令按钮设定 SVG 中的矩形的填充颜色，并且调用 SVG 的 JS 函数 FunCallByHtmlJs，产生个消息框。在 SVG 中，单击矩形时，设置 HTML 中的文本内容，并且调用 HTML 的 JS 函数 FunCallBySvgJs，产生个消息框。 让我们来了解 SVG 和 HTML 之间的交互方式。SVG 文件可以嵌入到 HTML 文件中，通过这种方式，我们可以在 HTML 文件中使用 SVG 文件的功能。在我们的例子中，我们创建了一个 SVG 文件（Svg&HtmlInteractive.svg），它包含了一个矩形和一个文本框。同时，我们还创建了一个 HTML 文件（Svg&HtmlInteractive.html），它包含了一个命令按钮和一个文本框。 在 SVG 文件中，我们定义了三个函数：init、FunCallByHtmlJs 和 Click。init 函数用于初始化 SVG 文件，包括获取 SVG 文件的文档对象和根元素，以及获取 HTML 文件的 window 对象。FunCallByHtmlJs 函数用于在 HTML 文件中调用 SVG 文件的 JS 函数，产生个消息框。Click 函数用于处理矩形的点击事件，当用户单击矩形时，它将设定 HTML 文件中的文本内容，并且调用 HTML 文件的 JS 函数 FunCallBySvgJs。 在 HTML 文件中，我们定义了两个函数：FunCallBySvgJs 和 FunCallByHtmlJs。FunCallBySvgJs 函数用于在 SVG 文件中调用 HTML 文件的 JS 函数，产生个消息框。FunCallByHtmlJs 函数用于在 HTML 文件中调用 SVG 文件的 JS 函数，产生个消息框。 在我们的例子中，我们使用了两个 JS 函数来实现 SVG 和 HTML 之间的交互。第一个函数是 FunCallByHtmlJs，它是在 HTML 文件中调用的 SVG 文件的 JS 函数。第二个函数是 FunCallBySvgJs，它是在 SVG 文件中调用的 HTML 文件的 JS 函数。 在实现这两个函数时，我们使用了 JavaScript 语言来编写代码。我们使用了 JavaScript 语言的 DOM 模型来访问和操作 HTML 文件和 SVG 文件的元素。我们还使用了 JavaScript 语言的事件模型来处理用户的交互事件，例如单击事件。 让我们来总结一下 SVG 和 HTML 之间的交互方式。 SVG 文件可以嵌入到 HTML 文件中，通过这种方式，我们可以在 HTML 文件中使用 SVG 文件的功能。我们可以使用 JavaScript 语言来编写代码，实现 SVG 和 HTML 之间的交互。我们可以使用 DOM 模型来访问和操作 HTML 文件和 SVG 文件的元素，并使用事件模型来处理用户的交互事件。