6

<embed>プログラムで HTML ドキュメントにタグを追加しています。

var e = document.createElement('embed');
e.src = "some-image.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

これは正常に機能し、SVG 要素は期待どおりに表示されます。ただし、JavaScript で SVG 要素を操作したいのですが、要素を DOM に追加した直後に操作しようとすると、コンテンツがまだ読み込まれていないため失敗します。

これどうやってするの。jQuery を使用せずにこれを実行したいので、jQuery API を指定しないでください。

4

2 に答える 2

8

@RGrahamがコメントで指摘しているように、要素<embed>はloadそのコンテンツの準備ができたときにイベントを発生させます。

したがって、私のコードは次のようになります。

var e = document.createElement('embed');
e.src = "img/z-slider.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

e.addEventListener('load', function()
{
    // Operate upon the SVG DOM here
    e.getSVGDocument().querySelector('#some-node').textContent = "New text!";
});

ちらつきがないため、これはポーリングよりも優れています。SVG は、描画される前に、読み込み直後に変更されます。

于 2013-10-02T15:30:22.287 に答える
0

作成した要素に ID を割り当てます。

  function check_if_loaded() {
    var your_svg = document.getElementById("id").getSVGDocument();
    if (your_svg) {
        alert("loaded");

    } else {
        console.log("not yet loaded")
    }
}

your_element.addEventListener('load',check_if_loaded, false)
于 2013-10-02T13:16:54.400 に答える