CODEWITHSUNDEEP
javascriptjquerysvg
user752135
user752135

Reputation: 71

contentDocument in jQuery

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.

Upvotes: 7

Views: 18028

Answers (3)

jbeard4
jbeard4

Reputation: 12811

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

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272106

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.

Upvotes: 5

Gary Green
Gary Green

Reputation: 22395

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

        })

    });
});

Upvotes: 5

Related Questions