JQuery & manipulating SVG loaded via object tag?

Question

I have loaded an SVG document via an object block and I am wanting to add a title tag programmatically to each group, but I am stuck. The SVG is loaded as follows:

<object data="International_Telecommunication_Union_region.svg" type="image/svg+xml" id="worldMap">
</object>

I then try to get one of the group elements, as follows (using JQuery 1.11.2):

$('g .landxx .BR')

but this returns an empty list. Yet if I do the following I get the element displayed in Chrome's console:

console.log($('g .landxx .BR'))

Can anyone suggest the right way to add a child element, to an SVG loaded via the object tag. I am would rather have the convenience of JQuery, but if this is not an option here, I am interested in hearing about alternatives.

BTW I did look at Raphael, but this seems to only allow manipulation of SVG objects created via Raphael, so not a viable option in this case.

Are you sure that the SVG is completely loaded when your jQuery code is called? — arjabbar, Apr 13 '15 at 01:51
You might be using the wrong document, see http://stackoverflow.com/questions/6316979/selecting-an-element-in-iframe-jquery (object and iframe should behave pretty similar). Anyway, just grab the `contentDocument` from the `object` element and use that, here's an example http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html. — Erik Dahlström, Apr 13 '15 at 08:24
@arjabbar I try the same operation from the console, once the image is completely loaded and the behaviour is the same. — Andre M, Apr 15 '15 at 02:46
@ErikDahlström I'll try that again, but I believe I had already tried that. — Andre M, Apr 15 '15 at 02:46
Sorry @Erik when I post an answer I didn't see that you already suggested it. — crockz, Apr 17 '15 at 02:57

score 0 · Answer 1 · edited May 23 '17 at 12:14

Just adapt the answer to this similar question using img tag:

How to change color of SVG image using CSS (jQuery SVG image replacement)?

change the src attribute to data and add a class="svg" to your object tag. I tested it and I was able to change the fills and strokes with css, should work fine as well with jquery.

jQuery('object#worldMap').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('data');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');
    });

JQuery & manipulating SVG loaded via object tag?

1 Answers1