8

I'm starting to use SVG and I have the following code:

HTML

<embed id="embed" src="svg.svg" type="image/svg+xml" width="400" height="300" >

<object id="object" data="svg.svg" type="image/svg+xml" width="400" height="300"></object>

Javascript

$(window).load(function (){
//alert("Document loaded, including graphics and embedded documents (like SVG)");

    var svgDoc_embed = document.getElementById("embed").getSVGDocument();
    alert("My svgDoc_embed => " + svgDoc_embed);

    var svgDoc_object = document.getElementById("object").getSVGDocument();
    alert("My svgDoc_object => " + svgDoc_object);  

});

In the FireFox browser works well 

My svgDoc_embed => [object SVGDocument]
My svgDoc_object => [object SVGDocument]

but does not work on Chrome browser.

My svgDoc_embed => null
My svgDoc_object => null

I have searched the Internet but can not find anything that works

Any suggestion is welcome

==========================================================================

I try opening the Chrome JS console and type in:

document.getElementById ("object"). GetSVGDocument ();

The result is null.

Also change the code to:

$ ("embed"). load (function () {
svgDoc_embed var = document.getElementById ("embed"). getSVGDocument ();
alert ("My # embed svgDoc_embed =>" + svgDoc_embed);
});

  $ ("object"). load (function () {
  svgDoc_object var = document.getElementById ("object"). getSVGDocument ();
alert ("My # object svgDoc_object =>" + svgDoc_object);
  });

And does not give any results.

Any suggestion is welcome.

suspectus
  • 16,548
  • 8
  • 49
  • 57
user2383880
  • 81
  • 1
  • 1
  • 3
  • 1
    Does contentDocument work in Chrome? i.e. document.getElementById("embed").contentDocument – Robert Longson May 18 '13 at 17:43
  • getSVGDocument() works on Chrome on one of my servers but not the other. Maybe it's the password protection? contentDocument returns null also. firstElementChild is null also. – Curtis Apr 02 '14 at 22:21
  • Apparently you have to wait for it to load first, then `contentDocument` seems to work. See http://stackoverflow.com/questions/11434916/javascript-accessing-inner-dom-of-svg – Max Starkenburg Apr 23 '16 at 19:31
  • 1
    I have the same issue when trying to use GetSVGDocument from the local filesystem rather than http or https. It seems to be a security issue. See https://stackoverflow.com/questions/52693026/ and Serge's answer in https://stackoverflow.com/questions/22529398/ – Ben Mares Jan 24 '19 at 22:11

1 Answers1

2

I believe getSVGDocument() is deprecated and didn't work in my copy of FF. Try using firstElementChild instead:

var svg = document.getElementById("object").firstElementChild;

or access the SVG element directly with:

var svg = document.getElementById("foo");

Where "foo" is the value of the id attribute of the root svg element.

<svg id="foo">
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • 7
    When you insert element inline, it doesn't form separate SVG document. It becomes a part of outer HTML document. When SVG is embedded with , however, it is contained it's own document. – WGH Feb 01 '14 at 19:42
  • I couldn't find any info on `getSVGDocument()` being deprecated. Plus, it [supported](https://caniuse.com/?search=getSVGDocument) by most of the browsers at the moment. – im.pankratov Nov 22 '21 at 14:25