6

私はsvgにまったく慣れておらず、svgを使用してタスクを実行する必要がありますが、多くの問題が発生しています。

パスによって定義された領域を持つsvg（たとえばマップ）があります。

私の目標は、svgの外部にあるonClick関数をトリガーして、いくつかのことを実行することです（たとえば、選択した領域に関連する一部の人のデータをajaxで取得し、htmlページのsvgの外に表示します）。

私ができないことは、svg内の要素からsvgの外部で定義された関数をトリガーすることです。

svgをインラインで追加すればこれを行うことができますが、Adobeプラグインで動作させるには、embedタグを使用する必要があります。なにか提案を？前もって感謝します。

4

1 に答える 1

10

この例を参照してください。

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.";
}
于 2012-05-09T13:03:21.187 に答える