getSVGDocument is returning NULL in Chrome

16,055

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">
Share:
16,055
Admin
Author by

Admin

Updated on July 06, 2022

Comments

  • Admin
    Admin about 2 years

    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.

  • WGH
    WGH over 10 years
    When you insert <svg> element inline, it doesn't form separate SVG document. It becomes a part of outer HTML document. When SVG is embedded with <object>, however, it is contained it's own document.
  • im.pankratov
    im.pankratov over 2 years
    I couldn't find any info on getSVGDocument() being deprecated. Plus, it supported by most of the browsers at the moment.