Can getElementByID decend into SVG docs?

Question

I am trying to earn some JavaScript by manipulating SVG docs. I have the following code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">    
    <rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/>
    <rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue">
        <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/>
    </rect>
</svg>

And trying to set up a simple alert when an element inside the SVG doc is clicked:

    $(document).ready(function () {
    'use strict';

    var img = document.getElementById("spikeroad");
        console.log(img);
    var delta = img.getElementById("outerrect");
        delta.addEventListener("click", function() {
           alert('Delta clicked');
        }, false);
});

The script can find the img well enough but then fails to attach the alert to he image when it is clicked. I hope to be able to dynamically attached animation events to objects using JavaScript but I need to work out how to identify them first.

this is all sitting in this html:

<html>
    <head>
        <title>My Title</title>
        <meta charset="utf-8">
        <script defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script defer="defer" src="controls.js" type="text/javascript"></script>
    </head>
    <body>
        <img id="spikeroad" src="map.svg" alt="loadbarspike"/>
    </body>
</html>

The outerrect is inside the svg document. Logging shows that this is null when one calling document.getElementByID — Doug Miller, May 30 '13 at 08:01
Please see this - http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript — dsgriffin, May 30 '13 at 08:02

score 0 · Answer 1 · answered May 30 '13 at 08:01

I think you should put your javascript into svg document. img.getElementById is not a function also. getElementById only works on document.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">

<script>
   window.onload = function() {
     var delta = document.getElementById("outerrect");
     delta.addEventListener("click", function() {
            alert('Delta clicked');
     }, false);
   };
</script>    
<rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/>
<rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue">
    <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/>
</rect>

Robert Longson · Answer 2 · 2013-06-10T08:51:18.557

Firsty you can't do this if you use an <img> element as they can't be manipulated with javascript. Swap that for an <object> element.

Then you need document to call getElementById on, you can get that document that is embedded in the <object> tag by calling contentDocument on the <object> element. If you're targetting the obsolete Adobe plugin for IE < 9 then it doesn't support contentDocument and you have to call getSVGDocument() instead. That gives us something like this...

function init() {
    'use strict';

    var img = document.getElementById("spikeroad");
    console.log(img);

    var svgdoc;
    if (object && object.contentDocument)
        svgdoc = object.contentDocument;
    else try {
       svgdoc = object.getSVGDocument();
    }

    var delta = svgdoc.getElementById("outerrect");
    delta.addEventListener("click", function() {
       alert('Delta clicked');
    }, false);
});

Then in your body tag write

<body onload="init()">

Can getElementByID decend into SVG docs?

2 Answers2

Linked