javascript - SVGで画像読み込みイベントをリッスンすることは可能ですか？

Question

<image>SVGでロードイベントをリッスンすることは可能ですか？はいの場合、これを行う方法は？

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

これはD3を使用して作成されたSVGオブジェクトでは機能しないことがわかりましたが、ここでの答えはうまくいきました。

実際の画像が読み込まれるまで、SVGにプレースホルダー画像を表示するにはどうすればよいですか？

たとえば、これは機能しました：

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