क्या एसवीजी में छवि लोड इवेंट सुनना संभव है?

Question

क्या एसवीजी में <image> लोड इवेंट सुनना संभव है? यदि हां, तो यह कैसे करें?

Answer 1

हाँ यह संभव है।

मार्कअप में:

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

jsfiddle देखें।

स्क्रिप्ट में:

<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> 

jsfiddle देखें।

Answer 2

मैंने पाया कि यह डी 3 का उपयोग कर बनाया एसवीजी वस्तु के लिए काम नहीं होगा, लेकिन इस सवाल का जवाब यहाँ महान काम किया:

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

उदाहरण के लिए इस काम किया:

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

लेकिन यह नहीं था कार्य:

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

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