I wrote a svg file like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ".1/DTD/svg11.dtd">

<svg width="1280pt" height="650pt" viewBox="0 0 1280 650" id="svg1" xmlns="" xmlns:xlink="" version="1.1"><script xlink:href="pathToPolyline.js"/><script><![CDATA[

alert(document);//returns [object SVG document]

//and tried

var path=document.getElementById('path1');//the problem line

alert(path);

]]></script>
<path id="path1" fill="#000000" d=" M 0.00 0.00 L 1280.00 0.00 L 1280.00 449.99 C 1276.46 444.19 1270.19 441.08 1265.59 436.31 C 1264.17 429.73 1265.36 422.91 1266.42 416.36 C 1267.19 413.43 1264.94 410.65 1262.45 409.42 C 1255.44 405.63 1247.99 402.68 12 .....

As in the comment line alert(document); alerts [object SVG document].

But:

var path=document.getElementById('path1');
alert(path);

alerts null.

I also tried to put svg in an html page, also in an xhtml page, tried more thing but no result for now.

Any idea?

I wrote a svg file like this:

<?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 width="1280pt" height="650pt" viewBox="0 0 1280 650" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><script xlink:href="pathToPolyline.js"/><script><![CDATA[

alert(document);//returns [object SVG document]

//and tried

var path=document.getElementById('path1');//the problem line

alert(path);

]]></script>
<path id="path1" fill="#000000" d=" M 0.00 0.00 L 1280.00 0.00 L 1280.00 449.99 C 1276.46 444.19 1270.19 441.08 1265.59 436.31 C 1264.17 429.73 1265.36 422.91 1266.42 416.36 C 1267.19 413.43 1264.94 410.65 1262.45 409.42 C 1255.44 405.63 1247.99 402.68 12 .....

As in the comment line alert(document); alerts [object SVG document].

But:

var path=document.getElementById('path1');
alert(path);

alerts null.

I also tried to put svg in an html page, also in an xhtml page, tried more thing but no result for now.

Any idea?

• javascript
• svg
• getelementbyid

• the svg represents expected view, i did not paste all the file here. – merveotesi Commented Jul 25, 2011 at 14:16

3 Answers 3

At the time you call var path=document.getElementById('path1');, the path1 is not defined yet (it comes later on).

You ought to put the code after the path definition.

However I'm not sure if you can put <script> tags inside a <svg>.

Just to supplement pimvdb's answer:

You can use script tags in SVG: http://www.w3.org/TR/SVG11/script.html

Furthermore, you can use jQuery 1.2.6 with pure SVG documents, or any version of jQuery if you're using an HTML document with embedded SVG. In this case, you would be able to put your script tag wherever you like, and then use jquery's $(document).ready method to run the scripts after the document has been loaded.

Hi there you can create your own getElementById function and pass the svg as parameter,

function getElementById(root: any, id: string): any {
    var node = root;

    start: while (node) {
        if (node.id == id) {
            return node
        }

        if (node.firstChild) {
            node = node.firstChild;
            continue start;
        }

        while (node) {
            if (node === root) {
                break start;
            }

            if (node.nextSibling) {
                node = node.nextSibling;
                continue start;
            }

            node = node.parentNode;
        }
    }
    return null
}

So to find element in the svg...

var elem = getElementById(svg, circleElemId)