如何从嵌入SVG调用父类的HTML文档中的函数(How to call a function in

我是很新的SVG和我必须用它执行任务，但我有很多的麻烦。

我有通过路径定义区域的SVG（一个地图为实例）。

我的目标是触发的onClick外部SVG做一些东西的功能（例如，通过AJAX检索某些人关于选定区域的数据，并显示在HTML页面中的SVG之外）。

什么我不能做的是触发从SVG元素的SVG以外定义的功能。

我能做到这一点，如果我加入SVG内联，但我需要使用嵌入标签，使其与IE浏览器的Adobe插件工作。 任何建议？ 提前致谢。

Answer 1:

见这个例子 。

在SVG中的代码如下所示：

    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");
    }

与父文档中你有你想打电话，例如，功能的脚本：

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.";
}

文章来源: How to call a function in the parent html document from an embedded svg