Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?

Question

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?

Answer 1

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.