Detecting when a SVG animation has ended
<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>