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

Question

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

我有一个由路径定义的区域的 svg（例如地图）。

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

我不能做的是从 svg 中的元素触发在 svg 之外定义的函数。

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

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