javascript - 如何从嵌入式 svg 调用父 html 文档中的函数

Question

我对 svg 很陌生，我必须用它执行任务，但我遇到了很多麻烦。

我有一个 svg(例如 map )，其中包含由路径定义的区域。

我的目标是触发 onClick 一个 svg 外部的函数来做一些事情(例如，通过 ajax 检索一些与所选区域相关的人数据，并将它们显示在 html 页面中的 svg 之外)。

我无法做到的是从 svg 中的元素触发在 svg 外部定义的函数。

如果我添加 svg 内联，我可以做到这一点，但我需要使用嵌入标签使其与 ie Adob​​e 插件一起工作。有什么建议吗？提前致谢。

Answer 1

参见 this example .

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