contentDocument in jQuery

Question

I have the following js script to access elements inside a object (SVG - <object data="bbbbbb.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object> )

jQuery(document).ready(function($) {

    $(window).load(function () {


        var a = document.getElementById("alphasvg");
        var svgDoc = a.contentDocument; 
        var delta = svgDoc.getElementsByTagName("path");    
        $(delta).click(function() {

            //do stuff

        })

    });
});

I want to use jQuery to access the elements and tags. I'm completely stuck on the contentDocument part. How can I convert this to jQuery so I can use attr etc?

I want to be able to access and modify attributes in jQuery instead of having to use the traditional js methods which I am unfamiliar with.

How someone can help me?

Thanks a million.

are you trying to access in-line frame values? – Piotr Kula May 13 '11 at 10:43 — Piotr Kula, May 13 '11 at 10:43

score 5 · Answer 1 · answered May 13 '11 at 10:42

5

You should be able to access the paths directly like elements, no need for contentDocument or getElementsByTagName, etc:

jQuery(document).ready(function($) {

    $(window).load(function () {

        $("#alphasvg path").click(function() {

            //do stuff
            // $(this).attr('d') = the path

        })

    });
});

answered May 13 '11 at 10:42

Gary Green

22,045
6
49
75

this is correct, the nice thing about svg is the elements are all accessible through the DOM – samccone May 13 '11 at 19:09

score 5 · Answer 2 · answered May 13 '11 at 11:02

5

Like this:

$(svgDoc).find("whatever").doWhatever();

Demo here and code here. Note that I've used an <iframe> for demonstration hence the first URL will work, second will give you "permission denied" error if you try to run the fiddle.

answered May 13 '11 at 11:02

Salman A

262,204
82
430
521

I was still getting same origin issues (http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript/3379830#comment25937521_3379830) when I ran without a server, so use a server, even for just client-side js and html as in these examples. – Michael Jul 22 '13 at 07:37

score 2 · Answer 3 · edited May 23 '17 at 11:51

2

If you are embedding SVG into HTML using the object tag (as opposed to inline SVG), this then this is a duplicate of a previous question, the answer to which may be found here: How to access SVG elements with Javascript

edited May 23 '17 at 11:51

Community

1
1

answered May 13 '11 at 19:00

jbeard4

12,664
4
57
67

contentDocument in jQuery

3 Answers3

Linked