¿Es posible escuchar evento de carga de imagen en SVG?

Question

¿Es posible escuchar un evento de carga <image> en SVG? Si es así, ¿cómo hacer esto?

Answer 1

Sí, es posible.

En marcado:

<image xlink:href="example.png" width="10" height="10" 
     onload="alert('loaded')"/> 

Ver jsfiddle.

En la escritura:

<script> 
    var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
    img.addEventListener('load', function() { alert('loaded'); }); 
    // or alternatively: 
    // img.onload = function() { alert('loaded'); } 
    img.width.baseVal.value = 100; 
    img.height.baseVal.value = 100; 
    img.href.baseVal = "example.png"; 
</script> 

Ver jsfiddle.

Answer 2

He encontrado que esto no funcionaría para SVG objeto creado usando D3, pero la respuesta aquí funcionaba muy bien:

How can I display a placeholder image in my SVG until the real image is loaded?

Por ejemplo esto funcionó:

var img = innerG.append("image") 
    .attr('onload', function() { 
     console.log('loaded'); 
    }) 
    .attr("xlink:href", src) 
    .attr("width", size) 
    .attr("height", size); 

pero esto no trabajo:

var img = innerG.append("image") 
    .attr("xlink:href", src) 
    .attr("width", size) 
    .attr("height", size); 

img.addEventListener('load', function() { console.log('loaded'); });