Accessing a DOM object defined in an external SVG file

by

It seems like the “right” way to do this would actually be to use an SVG “use” element, rather than an image. The reason for this is that the DOM interface of the SVG use element specifies a property “instanceRoot”, which allows you to get the root of the “instance tree” corresponding to that use element: http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement

So, you would end up with a solution that looks something like the following:
circle.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <circle r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>

Document which uses the svg root node of circle.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <use xlink:href="circle.svg#the_svg"/>
</svg>

Unfortunately, though, while Firefox supports use of the use element with external documents, there’s currently a bug in Webkit which does not allow this: https://bugs.webkit.org/show_bug.cgi?id=12499

Also, Firefox does not seem to implement the instanceRoot property for use elements.

So, it seems you may need to work around the limitations of current SVG implementations. The way I would recommend doing this is to use XMLHttpRequest to download the document to which you would like to link, and import the DOM of the downloaded document into your host document’s DOM. The following code implements this, and works in Firefox, Opera and Chromium:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <script>
    function fetchXML  (url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function (evt) {
        //Do not explicitly handle errors, those should be
        //visible via console output in the browser.
        if (xhr.readyState === 4) {
            callback(xhr.responseXML);
        }
        };
        xhr.send(null);
    };

    //fetch the document
    fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){
        //import it into the current DOM
        var n = document.importNode(newSVGDoc.documentElement,true);
        document.documentElement.appendChild(n);

        var circle = document.getElementById("the_circle"); //now you have the circle
    }) 
    </script>
</svg>

More Related Contents:

  1. JavaScript accessing inner DOM of SVG
  2. How to check if an embedded SVG document is loaded in an html page?
  3. Add SVG element to existing SVG using DOM
  4. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  5. SVG get text element width
  6. How do I manipulate the SVG DOM and create elements?
  7. Create a table in SVG
  8. How to pass arguments to addEventListener listener function?
  9. How to append text to a “?
  10. Difference between “change” and “input” event for an `input` element
  11. Setting innerHTML vs. setting value with Javascript
  12. javascript access parent DOM across domains?
  13. Convert SVG to PNG with applied images as background to svg elements
  14. D3 Appending Text to a SVG Rectangle
  15. jQuery: how to change tag name?
  16. How do you listen / detect changes to an input value – when the input value is changed via javascript?
  17. Get the string representation of a DOM node
  18. Count immediate child div elements using jQuery
  19. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  20. D3js take data from an array instead of a file
  21. D3 fill shape with image using pattern
  22. How to fill in form field, and submit, using javascript?
  23. event.toElement in IE8 and Firefox?
  24. svg / d3.js rounded corners on one side of a rectangle
  25. JQuery html() vs. innerHTML
  26. How do I capture a CTRL-S without jQuery or any other library?
  27. JavaScript: get the current executing node? [duplicate]
  28. How do I find the DOM node that is at a given (X,Y) position? (Hit test)
  29. Dynamically generated table – using an array to fill in TD values
  30. Why is iframe.contentWindow == null?

Leave a Comment