SVG与HTML交互实践：JS互调用示例

"SVG与HTML的交互涉及到JavaScript的互调用，允许SVG图形与HTML页面元素之间进行数据和事件的通信。在这个示例中，HTML按钮可以改变SVG图形的颜色，而SVG图形也可以响应点击事件更新HTML文本内容。这种交互通常通过在SVG和HTML中嵌入JavaScript来实现。" SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它支持动态行为和交互性。在HTML页面中嵌入SVG，可以利用JavaScript来实现两者之间的交互。这种交互性使得SVG不仅仅是一个静态的图像，还可以作为一个功能丰富的图形组件。 HTML中的JavaScript可以通过DOM（Document Object Model）接口访问和操作SVG元素。例如，通过`document.getElementById`或`querySelector`等方法获取SVG元素，然后修改其属性，如颜色、大小等。在提供的示例中，当HTML按钮被点击时，会调用一个JavaScript函数（例如`FunCallByHtmlJs`），该函数可以改变SVG中矩形的填充颜色。 SVG内部的JavaScript同样可以访问HTML元素，因为它运行在相同的JavaScript环境中。SVG中的`onclick`事件监听器可以捕获用户的点击事件，然后执行相应的函数。在示例中，当SVG矩形被点击时，会调用`FunCallBySvgJs`函数，该函数可能更新HTML文本内容或执行其他交互逻辑。 为了在SVG和HTML之间传递信息，通常需要保存对HTML `window` 对象的引用，这在SVG的`onload`事件处理函数中完成，如`parentWnd=window.parent;`。这样，SVG脚本就可以调用HTML页面中的函数和访问其元素。 需要注意的是，不同的浏览器可能需要不同的处理方式。例如，示例中提到的Adobe SVG Viewer需要特定的语法来获取父窗口对象，而在现代浏览器中，可以直接使用`window.parent`。在实际应用中，应该考虑兼容性和现代浏览器的API来确保广泛的支持。 总结来说，SVG与HTML的交互主要通过JavaScript实现，允许SVG图形动态响应用户操作，同时HTML也可以控制SVG元素，这大大增强了网页的交互性和视觉效果。开发者应当熟悉DOM操作和跨域通信规则，以便在不同环境下正确地实现SVG与HTML的交互。