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

Question

我对svg很新，我不得不用它执行任务，但我遇到了很多麻烦。

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

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

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

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

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