I have an SVG map that is niserted into HTML with help of the 'object' tag. Then, I try to use jQuery to access map's elements. (In particular I try to fill a rectangular in red.)

HTML:

<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>

jQuery:

jQuery(window).load(function () {
        var svgobject = document.getElementById('map');
        if ('contentDocument' in svgobject) {
            var svgdom = jQuery(svgobject.contentDocument);
            jQuery("#rect4578", svgdom).attr("fill", "red");
        }
    });

In chrome I get an error: Cannot read property 'contentDocument' of null (anonymous function) n.event.duspatch n.event.add.r.handle

What is the problem?

Thank you.

I have an SVG map that is niserted into HTML with help of the 'object' tag. Then, I try to use jQuery to access map's elements. (In particular I try to fill a rectangular in red.)

HTML:

<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>

jQuery:

jQuery(window).load(function () {
        var svgobject = document.getElementById('map');
        if ('contentDocument' in svgobject) {
            var svgdom = jQuery(svgobject.contentDocument);
            jQuery("#rect4578", svgdom).attr("fill", "red");
        }
    });

In chrome I get an error: Cannot read property 'contentDocument' of null (anonymous function) n.event.duspatch n.event.add.r.handle

What is the problem?

Thank you.

• javascript
• jquery
• svg

2 Answers 2

Are you getting this error only in chrome? Debug the code and look at this line in your code

var svgobject = document.getElementById('map')

What do you get in return here? Is the svgobject null? Because your id is not "map" its "imap"

The id is imap not map for getElement....