ansaurus

Question

How to access SVG elements with Javascript

Answer 1

A:

Aren't you able to use getElementById? Looks like it!

icio 2010-05-02 14:41:07

that's certainly the recommended route, but I've not been able to get it working.

gargantaun 2010-05-02 17:02:10

Answer 2

+1 A:

Hi,

a) Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG.

Definitely.

b) If it is possible, what's the technique?

This annotated code snippet works:

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
    <script>
        var a = document.getElementById("alphasvg");

        //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
        a.addEventListener("load",function(){
            var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
            var delta = svgDoc.getElementById("delta"); //get the inner element by id
            delta.addEventListener("mousedown",function(){alert('hello world!')},false);    //add behaviour
        },false);
    </script>

    </body>
</html>

Note that a limitation of this technique is that it is restricted by the same-origin policy, so alpha.svg must be hosted on the same domain as the html file, otherwise the inner DOM of the object will be inaccessible.

echo-flow 2010-07-31 21:19:22

ansaurus

tags:

views:

answers:

How to access SVG elements with Javascript

related questions