title: Detecting when a SVG animation has ended
body: <p>I have a SVG image inside my body tag that is being animated by the following code:</p>
  
  <pre><code>     &lt;clipPath id="left-to-right"&gt;
       &lt;rect x="0" y="0" width="0%" height="100%" &gt;
           &lt;animate attributeName="width" values="0%;100%" dur="5s" fill="freeze"/&gt;
       &lt;/rect&gt;
   &lt;/clipPath&gt;
  </code></pre>
  
  <p>I'm adding the .svg to the body via an image tag like so:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="loading-container"&gt;
    &lt;img id="silhoutte" src="Images/Silhoutte.svg"&gt;
   &lt;/div&gt;
   &lt;div id="content"&gt; 
    /* Content in here */ 
   &lt;div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The svg is serving as a "loading" animation while i preload/cache some high resolution images before displaying the actual content.</p>
  
  <p>My difficulty is in trying to detect the end of the SVG animation in order to reveal the content div. How would i go about detecting the animation if at all possible?</p>
  
  <p>I'm open to suggestions on better ways to implement a web page loading screen using the animated SVG i created.</p>
  
  <p>Thank you!</p>