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

Answer 1

Also see the jQuery SVG plugin

Answer 2

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

Answer 3

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 4

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 5

Things are actually simpler than you expect. You do not really need to read convoluted tutorial to understand the concept, neither do you have to use JQuery. Here is the basic layout:

• A JavaScript function in your html document.

  <script type="text/javascript">
  function change(){
      var s=document.getElementById("cube");
      s.setAttribute("stroke","0000FF");
  }
  </script>
  

• An SVG element that we are trying to manipulate.

  <svg width=100 height=100 style='float: left;'>
    <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
  </svg>
  

• An inline Button that would trigger the change. Notice that in my example the event can also be triggered by clicking on the cube itself.

  <button onclick="change()">Click</button>
  

Answer 6

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