javascript - How to call a function in the parent html document from an embedded svg

Question

I'm quite new to svg and I have to perform a task with it, but I'm having lots of troubles.

I have an svg (a map for instance) with areas defined by paths.

My goal is to trigger onClick a function external to the svg to do some stuff (for instance, retrieving by ajax some people data related to the area selected and show them outside the svg in the html page).

What I'm not able to do is to trigger a function defined outside the svg from an element in the svg.

I can do this if i add the svg inline, but I need to use the embed tag to make it work with ie Adobe plugin. Any suggestion? Thanks in advance.

Answer 1

See this example.

The code inside the svg looks like this:

    document.getElementById("svgroot").addEventListener("click", 
                                                        sendClickToParentDocument,
                                                        false);

    function sendClickToParentDocument(evt)
    {
        // SVGElementInstance objects aren't normal DOM nodes, 
        // so fetch the corresponding 'use' element instead
        var target = evt.target;
        if(target.correspondingUseElement)
            target = target.correspondingUseElement;

        // call a method in the parent document if it exists
        if (window.parent.svgElementClicked)
            window.parent.svgElementClicked(target);
        else
            alert("You clicked '" + target.id + "' which is a " + target.nodeName + " element");
    }

And in the parent document you have a script with a function you want to call, e.g:

function svgElementClicked(theElement)
{
    var s = document.getElementById("status");
    s.textContent = "A <" + theElement.nodeName + 
        "> element with id '" + theElement.id + 
        "' was clicked inside the <" + 
        theElement.ownerDocument.defaultView.frameElement.nodeName.toLowerCase() + 
        "> element.";
}