CODEWITHSUNDEEP
javascripthtmlsvg
Staale
Staale

Reputation: 27988

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

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?

Upvotes: 22

Views: 16010

Answers (7)

Temperage
Temperage

Reputation: 721

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>

Upvotes: 7

Matt Ellen
Matt Ellen

Reputation: 11592

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.

Upvotes: 0

kbwood
kbwood

Reputation:

Also see the jQuery SVG plugin

Upvotes: 1

Ris Adams
Ris Adams

Reputation: 1355

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

Upvotes: 5

David.Chu.ca
David.Chu.ca

Reputation: 38654

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

Upvotes: 1

Staale
Staale

Reputation: 27988

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.

Upvotes: 13

Pete Karl II
Pete Karl II

Reputation: 4300

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.

Upvotes: 6

Related Questions