¿Cómo comprobar si un documento SVG incrustado está cargado en una página html?

Question

Necesito editar (usando javascript) un documento SVG incrustado en una página html.

Cuando se carga el SVG, puedo acceder al dom del SVG y sus elementos. Pero no puedo saber si el SVG dom está listo o no, así que no puedo realizar acciones predeterminadas en el SVG cuando se carga la página html.

Para acceder al DOM SVG, utilizo este código:

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

donde "carta" es el id del elemento de inserción.

Si intento acceder a la SVG cuando el documento html está listo, de esta manera:

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

SVG es siempre nula. Solo necesito saber cuándo no es nulo, entonces puedo comenzar a manipularlo. ¿Sabes si hay una manera de hacerlo?

Answer 1

Usted podría tratar de votación De vez en cuando.

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

Answer 2

Puede asignar un controlador de eventos onload a un elemento dentro de su documento SVG y hacer que invoque una función javascript en la página html. cargar mapas a SVGLoad.

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

El evento se dispara en el punto en el que el agente de usuario ha analizado totalmente el elemento y sus descendientes y está listo para actuar adecuadamente sobre ese elemento

Answer 3

En su elemento de incrustación (por ejemplo 'Insertar', 'objeto', 'iframe') en el documento principal añadir un atributo onload que llama a su función, o añadir el detector de eventos en escritura, por ejemplo embeddingElm.addEventListener('load', callbackFunction, false). Otra opción podría ser escuchar DOMContentLoaded, depende de lo que desee.

También puede agregar un oyente de carga en el documento principal. jQuery(document).ready no significa que todos los recursos están cargados, solo que el documento en sí tiene un DOM que está listo para la acción. Sin embargo, tenga en cuenta que si escucha la carga del documento completo, no se invocará su función de devolución de llamada hasta que se carguen todos los recursos del documento, css, javascript, etc.

Si usa svg en línea, entonces jQuery(document).ready funcionará bien sin embargo.

En una nota adicional es posible que desee considerar el uso de embeddingElm.contentDocument (si está disponible) en lugar de embeddingElm.getSVGDocument().

Answer 4

Usando jQuery se puede enlazar con el evento de carga de la ventana Erik menciona con:

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

Answer 5

Asumiendo que su SVG se encuentra en una etiqueta <embed>:

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

La imagen SVG es esencialmente en una sub documento que tendrá un evento load por separado al del document principal.Sin embargo, se puede detectar este evento y manejarlo:

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

Esto es mejor que el sondeo como cualquier modificación que realice a la SVG va a pasar antes de que se pinta en primer lugar, la reducción de la pintura pasó el parpadeo y la CPU esfuerzo.

Answer 6

El evento de carga del elemento de inserción (por ejemplo, objeto) sería mi preferencia pero, si esa no es una solución viable por alguna razón, la única prueba genérica y confiable que he encontrado para SVG DOM listo es getCurrentTime método del elemento raíz SVG:

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 */ 
} 

los estados que W3C SVG recommendation getCurrentTime en una SVGSVGElement:

devuelve la hora actual en segundos con respecto a la hora de inicio del fragmento de documento SVG actual. Si se llama a getCurrentTime antes de que comience la línea de tiempo del documento (por ejemplo, mediante una secuencia de comandos que se ejecuta en un elemento 'script' antes de enviar el evento SVGLoad del documento), se devuelve 0.

Answer 7

Se podría utilizar un caso proceso de carga para el registro.

some.svg Supongamos que está incrustado en etiqueta de objeto:

<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"); 
}