Loading an External SVG into an SVG

Question

I have an SVG interface into which I want to load various user-selected SVG maps. The user initiates the loading of a map by clicking a button. Once loaded into its masked area the map would be dragable (pan-able, if you prefer) and possibly zoomable.

(My mental model, which I'm aware may be getting in the way, is the Flash AS loadMovie() command, which loads an external .swf into a named object on the stage. The external .swf then inherits the properties, including the name, of the target object.)

It appears the "use" command might be part of the answer, but the example I've found look like this:

<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

Whereas what I have in mind would be more like this snippet (abbreviated, not functional code):

<polygon id="button" onmouseup="loadsvg(buttonname)"/>
function loadsvg(fileref) {
    [some code here referencing the external SVG and the object to load it into]
}

Can someone point me to an example of an interactive SVG that works like this, with a button calling a load function that references both the external file and a target object? Or do I need to consider a different, less ActionScript-influenced architecture?

Answer 1

Revised answer per comments and addition of reference files

I misunderstood the initial question. If you want to load a set of resources to be used repeatedly then you may want to look into the use element, but it seems image will accomplish what you want.

First of all, you'll want to use an SVG image element to hold the external svg you're loading. This can be a static image element, or you can create it during the mouse up event of your SVG "button".

After creating the image and setting its properties accordingly, attach it to the DOM by appending it to the svg tag. I notice you have a rect named "target", and I think you were intending on using that as a container or placeholder to insert the external svg. However, since you can set the x and y properties of the image there is no need to have the rect .

To answer your question from the comment - there is no inherent advantage to dynamically adding the image element via js. Instead you could add it statically to the markup inside the svg tag, maybe setting its default size to (0, 0). When the mouse up event is triggered you would then just set the other properties, such the xlink:href for the particular .svg to load.

Here is adjusted mouse up event handler. Note that it is checking if the image element has already been added and reusing it. That may or may not be your intention. Based on the fact that you have static position and dimensions, I would say that you can just re-use the same image element. I added a some logic to the assignment of the x coordinate to give a visual indication of the image element being changed based on which button was clicked.

 function loadfile(mode) {
    console.log("mode is "+mode);

    var imageElement = document.querySelector("image");
    var x = mode === 'a' ? 40 : 60;

    if(imageElement === null) {
        imageElement = document.createElementNS("http://www.w3.org/2000/svg", "image");      
        imageElement.setAttribute("y",164);
        imageElement.setAttribute("width",707);
        imageElement.setAttribute("height",407);
        imageElement.setAttribute("fill","#d6d6d6");
        imageElement.setAttributeNS("http://www.w3.org/1999/xlink", "href", "art-b.svg");
        document.querySelector("svg").appendChild(imageElement);
    }


    imageElement.setAttribute("x",x);
}