Why does contentDocument returns null?

Question

I'd like to fill an svg file inside inside an <object> tag using javascript.

The problem is that .contentDocument returns null, therefore I can't fill the svg icon.

JSFiddle : http://jsfiddle.net/8kf36L0j/16/

I'm on the latest version of Firefox and Chrome, I read lots of other posts about this subject but I couldn't find something usefull to fix this issue.

HTML

<object id="svg_image_id" type="image/svg+xml" data="http://openclipart.org/people/StudioFibonacci/kitchen-blender.svg"></object>

Javascript

// Alternativ 1
alert(document.getElementById("svg_image_id").contentDocument); // .contentDocument == null ?
document.getElementById("svg_image_id").contentDocument.getElementById("path241").style.fill="red";

// Alternativ 2
var obj = document.querySelector("#svg_image_id");
var svg = obj.contentDocument.querySelector("svg"); // obj.contentDocument == null ?
svg.style.fill="red";
alert(svg);

Why is contentDocument returning null ? How can I fill the svg icon to another color ?

It is a cross origin issue - [this answer](http://stackoverflow.com/questions/15002652/get-value-of-input-field-inside-an-iframe/17262334#17262334) could help — Jaromanda X, Mar 28 '17 at 22:35
@JaromandaX So if the svg was on my own server it should work ? — Horai Nuri, Mar 28 '17 at 22:38
use whatever server side language you have - the technique is the important part - you probably have no luck making it work in jsfiddle — Jaromanda X, Mar 28 '17 at 23:15
Here is one way to get in jsfiddle : https://jsfiddle.net/Lfhkxkz6/ — Kaiido, Mar 29 '17 at 00:44

Luhn · Answer 1 · 2022-04-11T13:49:06.327

-1

Make sure u are using the object element:

<object id="map" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

If obtaining a svg from a diffrent domain, use a fetch call

const map = document.querySelector('#map');
(async () => {
    const markup = await (await fetch('external-website.com/my.svg')).text();
    const blob = new Blob([markup], { type: 'image/svg+xml' });
    map.data = URL.createObjectURL(blob);

    map.onload = (e) => {
        const doc = map.getSVGDocument();
        doc.addEventListener('click', (e) => {
            console.log(e.target);
        });
    };
})();

edited Apr 11 '22 at 13:49

answered Apr 11 '22 at 08:59

Luhn

706
6
15

They are already using an object element. – Quentin Apr 11 '22 at 09:16
My bad, combining it with fetch call may be a solution in this case – Luhn Apr 11 '22 at 13:50

Why does contentDocument returns null?

1 Answers1