9

jQuery を介してページに SVG を動的に追加するページがあります。

grid.append($('<object>')
.load(function () {
    // do stuff
    alert('loaded')
})
.attr({
    id: 'tile',
    type: 'image/svg+xml',
    width: Math.round(tile_w),
    height: Math.round(tile_h),
    data: 'map/base.svg'
})
);

(変数を svg スクリプト コンテキストに「プッシュ」するために) SVG ドキュメントにアクセスする必要がありますが、そのためには SVG をロードする必要があります。私の問題は、ロードイベントが機能しないことです。アラートは表示されません。

実行する方法？

編集： jQueryは単に「ロード」イベントを非画像要素または文書要素にバインドすることを妨げているようです。そのため、「公式」のaddEventListener（）関数を使用します（愚かなIEではサポートされていませんが、これは問題ありません）私のため）：

grid.append($('<embed>')
    .attr({
        id: 'tile' + i,
        type: 'image/svg+xml',
        width: Math.round(tile_w),
        height: Math.round(tile_h),
        src: 'map/base.svg'
     })
    .css({
        position: 'absolute',
        left: Math.round(p.x),
        top: Math.round(p.y)
    }).each(function (i){
        this.addEventListener ('load', function (e) {
            alert('loaded')
        })
    })
);
4

1 に答える 1

-1

あなたの例に何があるかわかりませんgridが、それが通常の dom 要素である場合、loadAPI 呼び出しは API ドキュメントで定義された形式である必要があります。現在、意味のない関数呼び出しをロードしようとしているようです。

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

それで

grid.append($('<object>').load('image.svg',
    function (response, status, xhr) {
        if (status == 'success') {
            // yay the load is ok
            alert('loaded');
        }
    })
);

http://api.jquery.com/load/

更新: HTML を使用してブラウザーに SVG データをロードしようとしたことはありませんが、W3C のドキュメントには、そのために<object>タグを使用できるとは記載されていません。彼らの使用例<embed>

<embed src="circle1.svg" type="image/svg+xml" />

の代わりにそれを使ってみました<object>か?

更新 2:

onloadJSイベントは次のタグでサポートされているため、上記のソリューションも機能しないと思います<body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style>-これはjQueryがフックしているものであると想定しているため、これらの要素に対してのみ機能します。jQuery のドキュメントによると、イベント ハンドラーはオブジェクトによってサポートされimages, scripts, frames, iframesていwindowます。

したがって、実際にそれが機能しない場合は、.load()メソッド呼び出しを使用して結果を処理するだけでよいと思います。おそらく、svg 埋め込みタグを別の html ファイルに入れるか、html 埋め込みを生成するスクリプトを用意することができます。

http://www.w3schools.com/jsref/event_onload.asp

更新 3:

この問題には、少なくとも 2 つの正しい解決策があるようです。

  1. jQuery SVG プラグインhttp://keith-wood.name/svg.html

  2. 読み込み後の SVG キャンバスとのやり取りに関する情報を含む、ここで詳しく説明されている jQueryajax()呼び出し。

于 2012-08-26T19:33:49.070 に答える