How to listen to a load event of an object with a SVG image?

Question

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object?

I have created this minimal example of my problem.

HTML:

<object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" />

Javascript:

alert('loading');
$('#animation').on('load', function() {
  alert('loaded');
});

Worth noting that you can load an svg with Snap using Snap.load which takes a callback, like http://stackoverflow.com/questions/20110422/load-svg-into-a-specific-div-with-snap-svg/20153163#20153163 — Ian, Jul 10 '14 at 11:33
In that case, no it wouldn't load the file, so if the image is needed like that, it wouldn't be of use. — Ian, Jul 10 '14 at 14:08

score 11 · Accepted Answer · edited May 23 '17 at 12:13

From this post jQuery SVG-object tag load event

It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function...

Also unsure if that's still the case but your issue was mostly that in jsfiddle you were executing the code on document "loaded" instead of document "ready". Document loaded means all the resources are loaded prior executing the code so the svg image would already be loaded.

Works fine with this updated jsfiddle http://jsfiddle.net/47jSh/2/

alert('loading');
$('#animation')[0].addEventListener('load', function() {
    alert("loaded");    
}, true);

How to listen to a load event of an object with a SVG image?

1 Answers1

Linked