title: Animate Fill SVG on Hover Mode
body: <p>Hi guys I am trying to animate the FILL of my SVG.</p>
  
  <p>What I want is that when I hovered my mouse the FILL will come out from the bottom to top filling in the whole circle. But I am stack how to apply the same using CSS3 transfrom: scale property.</p>
  
  <p><img src="https://i.stack.imgur.com/mvmpK.jpg" alt="enter image description here"></p>
  
  <p>As an example check out this demo: <a href="http://tympanus.net/Tutorials/CircleHoverEffects/" rel="nofollow noreferrer">http://tympanus.net/Tutorials/CircleHoverEffects/</a>
  That example is CSS not SVG I need to apply this pop-up FILL effect on my SVG.</p>
  
  <p>here's my code so far:</p>
  
  <pre><code>    &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
       height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon"&gt;
  
  &lt;style type="text/css"&gt;     
      .st0
      {
          fill:none;
          stroke:#F2F2F2;
          stroke-width:4;
          stroke-miterlimit:10;
      }
  
      #icon .st0{
          -webkit-transition: .5s;
      }
  
      #icon:hover .st0{ 
          fill: #ffffff;
          stroke: #1f8a4c;
          cursor: pointer;
      }       
  &lt;/style&gt;
  
  
  &lt;g id="container"&gt;
      &lt;circle class="st0" cx="101" cy="99" r="89.333"/&gt;
  &lt;/g&gt;
  
  &lt;g id="icon-details"&gt;
      &lt;path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
          l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/&gt;
      &lt;circle class="st0" cx="77.843" cy="72.434" r="33.331"/&gt;
      &lt;circle class="st0" cx="77.844" cy="72.434" r="22.343"/&gt;
  &lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>Check out JSFIDDLE: <a href="http://jsfiddle.net/uhkwLuph/2/" rel="nofollow noreferrer">http://jsfiddle.net/uhkwLuph/2/</a></p>