SVG与html的交互(svg的js与html的js互调用)[归类].pdf

SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它可以被嵌入到HTML文档中，实现与HTML的交互。在这个例子中，我们看到了SVG图形如何与HTML元素进行互动，通过JavaScript来调用彼此的功能。 SVG文档以嵌入的方式存在于HTML文档中，这使得它们可以共享同一个DOM（Document Object Model）。SVG文档内部的JavaScript可以访问HTML文档的元素，反之亦然。这是通过JavaScript对象的引用和事件处理函数实现的。 在SVG文件中，`init`函数是一个重要的初始化函数，它在SVG加载完成后被调用。在`init`函数中，`svgDoc`变量被赋值为当前SVG文档，`svgRoot`是SVG文档的根元素，而`parentWnd`被设置为父窗口对象，即包含SVG的HTML文档的window对象。这样，SVG就可以与HTML进行通信了。 当用户在HTML中点击命令按钮时，会触发一个JavaScript函数，例如`FunCallByHtmlJs`，该函数可以在SVG中执行特定操作，如改变SVG图形的属性或调用SVG中的其他函数。在这个例子中，它弹出一个消息框显示由HTML调用的SVG JavaScript函数。 另一方面，当用户在SVG的矩形上点击时，会触发SVG中的`Click`事件处理函数。这个函数会检查点击的是哪个元素，如果是在矩形上，它将改变HTML文档中某个元素（如文本）的内容，并调用HTML中的函数`FunCallBySvgJs`，同样弹出一个消息框，表示SVG调用了HTML的JavaScript函数。 HTML文档部分，虽然未给出完整代码，但我们可以推测它包含一个按钮和一个文本元素，按钮的点击事件会触发上述的SVG交互，文本元素的内容会在SVG的矩形被点击时被更新。 这个例子展示了SVG和HTML之间双向交互的可能性，这对于创建动态、交互丰富的网页图形非常有用。开发者可以利用这种交互性来创建复杂的Web应用程序，其中SVG用于绘制图形，而HTML则用于布局和提供用户界面。通过JavaScript，两者可以无缝地协同工作，提供更丰富的用户体验。