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

问题描述

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

示例：

 < object id =imgdata =image.svgwidth =500height =300/> 
< script> document.getElementById（img）。addData（[1,23,4]）;< / script> 
  

完全可以在SVG文档上调用方法吗？如果是这样，我该如何声明在SVG文件中公开的方法，以及如何从HTML文档中调用它们？

解决方案

解决方案：

svg：

 < script> document.method = function（）{}< / script> 
  

在html中（使用原型添加事件侦听器）：

 < script> $（img）。observe（load，function（）{$（img）。contentDocument.method（）}）; 
  

您需要监听图像上的加载事件。加载图像后，您可以使用 element.contentDocument 访问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.

Example:

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

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?

解决方案

Solution:

in svg:

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

in html (using prototype to add event listeners):

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

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屋！