41

HTML ページに埋め込まれた SVG ドキュメントを (javascript を使用して) 編集する必要があります。

SVG が読み込まれると、SVG の dom とその要素にアクセスできます。しかし、SVG dom の準備ができているかどうかを知ることができないため、html ページがロードされたときに SVG でデフォルトのアクションを実行できません。

SVG dom にアクセスするには、次のコードを使用します。

var svg = document.getElementById("chart").getSVGDocument();

ここで、「chart」は埋め込み要素の ID です。

HTML ドキュメントの準備ができたときに SVG にアクセスしようとすると、次のようになります。

jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...

svg は常に null です。null でないときを知る必要があるだけなので、操作を開始できます。それを行う方法があるかどうか知っていますか？

4

8 に答える 8

24

メイン ドキュメントの埋め込み要素 (「embed」、「object」、「iframe」など) に、onload関数を呼び出す属性を追加するか、スクリプトにイベント リスナーを追加しますembeddingElm.addEventListener('load', callbackFunction, false)。別のオプションは、リッスンするDOMContentLoadedことです。これは、目的に応じて異なります。

メイン ドキュメントにロード リスナーを追加することもできます。jQuery(document).readyすべてのリソースが読み込まれるという意味ではなく、ドキュメント自体にすぐに使用できる DOM があるということです。ただし、ドキュメント全体の読み込みをリッスンする場合、そのドキュメント内のすべてのリソース (css、javascript など) が読み込まれるまで、コールバック関数は呼び出されないことに注意してください。

ただし、インライン svg を使用する場合はjQuery(document).ready問題なく動作します。

embeddingElm.contentDocumentさらに、の代わりに (利用可能な場合) の使用を検討することをお勧めしますembeddingElm.getSVGDocument()。

于 2010-08-18T09:19:02.947 に答える
9

SVG が<embed>タグ内にあると仮定します。

<embed id="embedded-image" src="image.svg" type="image/svg+xml" />

loadSVG 画像は基本的に、メインのイベントとは別のイベントを持つサブドキュメントにありdocumentます。ただし、このイベントをリッスンして処理することはできます。

var embed = document.getElementById("embedded-image");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
    // Operate upon the SVG DOM here
});

これは、SVG に加えた変更が最初に描画される前に行われるため、ポーリングよりも優れており、描画に費やされるちらつきと CPU の負荷が軽減されます。

于 2013-10-02T15:49:18.303 に答える
2

jQueryを使用すると、Erikが言及しているウィンドウロードイベントにバインドできます：

$(window).load(function(){
    var svg = document.getElementById("chart").getSVGDocument();
});
于 2010-11-13T07:48:48.143 に答える
-1

SVGドキュメント内の要素にonloadイベントハンドラーを割り当てて、htmlページでjavascript関数を呼び出すことができます。onloadはSVGLoadにマップされます。

http://www.w3.org/TR/SVG11/interact.html#LoadEvent

イベントは、ユーザーエージェントが要素とその子孫を完全に解析し、その要素に対して適切に動作する準備ができた時点でトリガーされます。

于 2008-12-03T14:37:32.730 に答える
-4

頻繁にポーリングを試すことができます。

function checkReady() {
    var svg = document.getElementById("chart").getSVGDocument();
    if (svg == null) {
        setTimeout("checkReady()", 300);
    } else {
        ...
    }
}
于 2008-12-03T14:53:50.810 に答える