Question

I need to insert a DOM which is a complete SVG document into an <object> element. SO here’s my code:

var svgDom   = (new DOMParser()).parseFromString(streamedFile,'image/svg+xml');
var pagePics = document.querySelectorAll('#currentFiles figure object');

for (var i=0; i<pagePics.length; i++){
    pagePics[i].contentDocument = svgDom.document;
}

But this doesn’t work. DOM inspector doesn’t show <object>‘s contentDocument property after this code has run.

It’s possible to use jQuery if this makes things easier. What am i doing wrong?

Answer 1

contentDocument is a read-only attribute. You can’t move Document​s from one context to another.

Usually you’d have to importNode content from one document into another. However that’s of little use if you’ve got different document types like SVG and HTML.

For loading SVG from a string string into an iframe or object, I’d think you’d have no choice but to create the element with a data: URL, eg. <object data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E...">.