Pertanyaan Bagaimana cara memeriksa apakah dokumen SVG tertanam dimuat dalam halaman html?


Saya perlu mengedit (menggunakan javascript) dokumen SVG yang tertanam di halaman html.

Ketika SVG dimuat, saya dapat mengakses dom dari SVG dan elemen-elemennya. Tetapi saya tidak dapat mengetahui apakah dom SVG sudah siap atau tidak, jadi saya tidak bisa melakukan tindakan default pada SVG ketika halaman html dimuat.

Untuk mengakses dom SVG, saya menggunakan kode ini:

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

di mana "bagan" adalah id dari elemen penyematan.

Jika saya mencoba mengakses SVG ketika dokumen html sudah siap, dengan cara ini:

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

svg selalu nol. Saya hanya perlu tahu kapan itu tidak nol, jadi saya bisa mulai memanipulasinya. Apakah Anda tahu jika ada cara untuk melakukannya?


32
2017-12-03 14:29


asal


Jawaban:


Anda bisa sering mencoba polling.

function checkReady() {
    var svg = document.getElementById("chart").getSVGDocument();
    if (svg == null) {
        setTimeout("checkReady()", 300);
    } else {
        ...
    }
}

-5
2017-12-03 14:53



Pada elemen embedding Anda (misalnya 'embed', 'object', 'iframe') di dokumen utama, tambahkan sebuah onload atribut yang memanggil fungsi Anda, atau tambahkan listener kejadian dalam skrip, mis embeddingElm.addEventListener('load', callbackFunction, false). Pilihan lain mungkin untuk mendengarkan DOMContentLoaded, tergantung pada apa yang Anda inginkan.

Anda juga dapat menambahkan listenerener pada dokumen utama. jQuery(document).ready tidak berarti bahwa semua sumber daya dimuat, hanya saja dokumen itu sendiri memiliki DOM yang siap beraksi. Namun perhatikan bahwa jika Anda mendengarkan beban di seluruh dokumen, fungsi panggilan balik Anda tidak akan dipanggil sampai semua sumber daya dalam dokumen tersebut dimuat, css, javascript, dll.

Jika Anda menggunakan svg inline, lalu jQuery(document).ready Akan berfungsi dengan baik.

Pada catatan lebih lanjut Anda mungkin ingin mempertimbangkan untuk menggunakan embeddingElm.contentDocument (jika tersedia) sebagai ganti embeddingElm.getSVGDocument().


22
2017-08-18 09:19



Anda bisa menggunakan onload acara untuk pemeriksaan.

Misalkan some.svg tertanam dalam tag objek: 

<body>    
<object id="svgholder" data="some.svg" type="image/svg+xml""></object>
</body>

Jquery

var svgholder = $('body').find("object#svgholder");

svgholder.load("image/svg+xml", function() {
    alert("some svg loaded");
});

javascript

var svgholder = document.getElementById("svgholder");

svgholder.onload = function() {
    alert("some svg loaded");
}

11
2017-11-26 09:32



Dengan asumsi SVG Anda dalam bentuk <embed> menandai:

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

Gambar SVG pada dasarnya adalah dalam sub-dokumen yang akan memiliki terpisah load acara dengan yang utama document. Namun, Anda dapat mendengarkan acara ini dan menanganinya:

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

Ini lebih baik daripada polling karena modifikasi apa pun yang Anda lakukan pada SVG akan terjadi sebelum dicat untuk pertama kalinya, mengurangi usaha flicker dan CPU yang menghabiskan lukis.


8
2017-10-02 15:49



Peristiwa beban elemen penyematan (misalnya objek) akan menjadi preferensi saya tetapi, jika itu bukan solusi yang layak untuk beberapa alasan, satu-satunya tes yang umum dan dapat diandalkan yang saya temukan untuk SVG DOM siap adalah metode getCurrentTime dari SVG elemen root:

var element = document.getElementById( 'elementId' );
var svgDoc = element.contentDocument;
var svgRoot = svgDoc ? svgDoc.rootElement : null;

if ( svgRoot
    && svgRoot.getCurrentTime
    && ( svgRoot.getCurrentTime() > 0 ))
{
    /* SVG DOM ready */
}

Itu Rekomendasi SVG W3C menyatakan bahwa getCurrentTime pada sebuah SVGSVGElement:

Mengembalikan waktu saat ini dalam detik relatif terhadap waktu mulai untuk fragmen dokumen SVG saat ini. Jika getCurrentTime dipanggil sebelum timeline dokumen telah dimulai (misalnya, dengan skrip yang berjalan di elemen 'skrip' sebelum kejadian SVGLoad dokumen dikirim), kemudian 0 dikembalikan.


3
2017-12-31 10:09



Menggunakan jQuery Anda dapat mengikat ke acara memuat jendela Erik menyebutkan dengan:

$(window).load(function(){
    var svg = document.getElementById("chart").getSVGDocument();
});

2
2017-11-13 07:48



Anda dapat menetapkan event handler kejadian ke elemen dalam dokumen SVG Anda dan memanggilnya fungsi javascript di halaman html. onload maps to SVGLoad.

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

Peristiwa ini dipicu pada titik di mana agen pengguna telah sepenuhnya menguraikan elemen dan turunannya dan siap untuk bertindak secara tepat atas elemen tersebut


0
2017-12-03 14:37