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.

Answer 2

A few years ago, I was asked to create a 2-player Ajax-based game using SVG. It may not be precisely the solution you're looking for, but it may help you listen for events in your SVG. Here's the SVG controller:

fyi, the SVG was being dragged and dropped (it was Stratego)

/****************** Track and handle SVG object movement *************/
var svgDoc;
var svgRoot;
var mover='';    //keeps track of what I'm dragging

///start function////
//do this onload
function start(evt){
    //set up the svg document elements
    svgDoc=evt.target.ownerDocument;
    svgRoot=svgDoc.documentElement;
    //add the mousemove event to the whole thing
    svgRoot.addEventListener('mousemove',go,false);
    //do this when the mouse is released
    svgRoot.addEventListener('mouseup',releaseMouse,false); 
}

// set the id of the target to drag
function setMove(id){ mover=id; }

// clear the id of the dragging object
function releaseMouse(){ 
    if(allowMoves == true){ sendMove(mover); }
    mover=''; 
}

// this is launched every mousemove on the doc
// if we are dragging something, move it
function go(evt){
    if(mover != '' && allowMoves != false) {
     //init it
     var me=document.getElementById(mover);

     //actually change the location
     moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece
     moveY = evt.clientY-65;
     me.setAttributeNS(null, 'x', evt.clientX-135);
     me.setAttributeNS(null, 'y', evt.clientY-65);
    }
}

function moveThis(pieceID, x, y) {
    $(pieceID).setAttributeNS(null, 'x', x);
    $(pieceID).setAttributeNS(null, 'y', y);
}

My app was pure SVG + JavaScript, but this is the gist of it.

Answer 3

I have explored the svg by JavaScripts. See the blog: Scaling SVG Graphics with JavaScripts

Answer 4

I would reference Dr. David Dailey as the most awesome SVG / JS info you will find http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

Also see the jQuery SVG plugin

Answer 6

For support in IE6, have a look at SVGWeb.

There are examples on how to manipulate SVG with JavaScript in the sample code supplied with the library.

There is also a fair amount of information in the archives of the mailing list.