是否可以使用 JavaScript 操作嵌入在 HTML 文档中的 SVG 文档? [英] Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?

问题描述

我制作了一个 SVG 图像，或者更像是迷你应用程序，用于查看数据图表.我想将其包含在 HTML 页面中，并在 SVG 图像上调用方法.

I have made a SVG image, or more like mini application, for viewing graphs of data. I want to include this in a HTML page, and call methods on the SVG image.

示例:

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

是否可以在 SVG 文档上调用方法?如果是这样，我如何声明要在 SVG 文件中公开的方法，以及如何从 HTML 文档中调用它们?

Is it at all possible to call methods on the SVG document? If so, how do I declare the methods to expose in the SVG file, and how do I call them from the HTML document?

推荐答案

解决方案:

在 svg 中:

<script>document.method = function() {}</script>

在 html 中(使用原型添加事件监听器):

in html (using prototype to add event listeners):

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

您需要监听图像上的加载事件.加载图像后，您可以使用 element.contentDocument 访问 svg 文档上的文档变量.添加的任何方法都将可用.

You need to listen to the load event on the image. Once the image is loaded, you can use the element.contentDocument to access the document variable on the svg document. Any methods added to that, will be available.

这篇关于是否可以使用 JavaScript 操作嵌入在 HTML 文档中的 SVG 文档?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！