2011-10-05 12 views
6

Tengo un documento SVG y quiero poder incluir un script en él (usando la etiqueta <script>). Dentro de este script, quiero configurar una función que se invocará cuando el documento se haya cargado y esté disponible para su manipulación.SVG: ejecutar el script cuando el documento se ha cargado

Si estuviera haciendo esto con HTML y JQuery solo usaría $(document).ready(...). Estoy buscando hacer lo mismo dentro de un documento SVG, pero obviamente no puedo usar JQuery de la misma manera.

En resumen, lo que estoy buscando es algo así como:

test.svg:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
    <script type="text/ecmascript" xlink:href="myscript.js" /> 

    <!-- Rest of SVG body goes here --> 
</svg> 

MyScript.js:

function init(evt) { 
    var svgDocument = evt.target.ownerDocument; 
    var svgRoot = svgDocument.documentElement; 
    // Manipulate SVG DOM here 
} 

// --> Somehow attach init() function to onload event of SVG <-- 

quiero intentar y hacer esto dentro del script en lugar de depender de unexplícitoen la definición de SVG. (Quiero escribir un guión que podría incluirse en varios SVG sin que ellos tengan que saber cómo funciona el guión).

Respuesta

2

Tal vez 'onload' es el evento que estás buscando. Mira here

+0

Probablemente, pero estoy buscando una forma de enganchar en ese evento a través de javascript, ejecutando desde ** dentro de ** SVG (o al menos incluido desde un archivo separado usando la etiqueta '

6

Aquí es un ejemplo

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'> 
<script type="text/ecmascript"> 
function init(evt) { 
var svgDocument = evt.target.ownerDocument; 
var svgRoot = svgDocument.documentElement; 
// Do whatever you like on svgRoot to manipulate your SVG DOM 
} 
</script> 
</svg> 
+0

Gracias. Eso es más o menos lo que quiero lograr. Sin embargo, lo que me gustaría hacer es evitar tener que agregar 'onload =" ... "' en la etiqueta ''. He actualizado la pregunta original para aclarar esto (¡espero!). – FixMaker

2

Nada (pero IE) que impide el uso de controladores de eventos DOM estándar en el JS incrustados en SVG:

document.addEventListener('load', init); 

Para IE, normalmente se utiliza attachEvent más o menos, pero no sé, si IE (> = 9) admite esto en SVG.

Principalmente, los archivos SVG son independientes, por lo que DOMReady (también conocido como DOMContentLoaded) y los eventos de carga no están muy separados (en comparación con HTML, donde se deben cargar docenas de archivos e imágenes CSS). evento en lugar de un evento DOMReady (que desafortunadamente todavía no está estandarizado) será inaceptable. Aparte de eso, nunca lo he intentado, si los navegadores incluso activan un evento DOMReady, cuando el DOM del SVG está cargado.

2

Puede intentar incluir su script al final del documento svg, luego no tendrá que esperar al evento de carga. Pero esto puede fallar si se hace referencia a cualquier archivo externo en el documento y no se han cargado cuando se ejecuta el script.

Cuestiones relacionadas