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


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

Cuando el SVG está cargado, 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 a SVG dom, uso este código:

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

donde "gráfico" es la identificación del elemento de inserción.

Si trato de acceder al SVG cuando el documento html está listo, de esta manera:

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

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


32
2017-12-03 14:29


origen


Respuestas:


Puede intentar sondear de vez en cuando.

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

-5
2017-12-03 14:53



En su elemento de inserción (por ejemplo, 'insertar', 'objeto', 'iframe') en el documento principal, agregue un onload atributo que llama a su función, o agregar el oyente de evento en el script, por ejemplo embeddingElm.addEventListener('load', callbackFunction, false). Otra opción podría ser escuchar DOMContentLoaded, depende de lo que quieras para.

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 de todo el documento, no se invocará su función de devolución de llamada hasta que se carguen todos los recursos de ese 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 embeddingElm.contentDocument (si está disponible) en lugar de embeddingElm.getSVGDocument().


22
2017-08-18 09:19



Puedes usar un onload evento para el cheque.

Supongamos que some.svg está incrustado en la 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");
}

11
2017-11-26 09:32



Asumiendo que su SVG está en una <embed> etiqueta:

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

La imagen SVG se encuentra esencialmente en un subdocumento que tendrá un load evento al de la principal document. Sin embargo, puedes escuchar 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, ya que cualquier modificación que realice en el SVG tendrá lugar antes de que se pintee por primera vez, lo que reducirá el parpadeo y el esfuerzo de CPU dedicado a la pintura.


8
2017-10-02 15:49



El evento de carga del elemento de inserción (por ejemplo, el 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 el método getCurrentTime del SVG elemento raíz:

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 Recomendación W3C SVG indica que getCurrentTime en un SVGSVGElement:

Devuelve la hora actual en segundos relativa a la hora de inicio para el 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.


3
2017-12-31 10:09



Usando jQuery puedes enlazar al evento de carga de ventana con el que Erik menciona:

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

2
2017-11-13 07:48



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 desencadena en el punto en que el agente de usuario ha analizado por completo el elemento y sus descendientes y está listo para actuar de manera apropiada sobre ese elemento


0
2017-12-03 14:37