title: Javascript animation of a svg
body: <p>i am trying to animate the radius of the circle #mask-hole-2 with javascript. so that it animates the radius from 0 to 145px. but i dont  know how to do this in a common way. i cant use css cause there seems to be another specification used on firefox for animating masks with css. any help is appreciated.  </p>
  
  <pre><code> &lt;svg width="400" height="300"&gt;
    &lt;defs&gt;
     &lt;mask id="hole"&gt;
       &lt;circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /&gt;
      &lt;rect id="mask-hole-3" width="100%" height="100%" fill="white"/&gt;
      &lt;circle id="mask-hole-2" cx="165" cy="156.5" r="145" /&gt;
     &lt;/mask&gt;
    &lt;/defs&gt;
    &lt;image width="400" height="300"
         xlink:href="http://lorempixel.com/400/300/sports/"
         mask="url(#hole)"/&gt;
   &lt;/svg&gt;
  </code></pre>