title: How to animate svg rect to grow
body: <p>I'm trying to make an svg  grow, as a basic bar chart that is growing from zero to the height of 27.5, e.g. I want it to animate from bottom to top</p>
  
  <p>I tried the following code but it makes the rectangle grow from top to bottom, rather than bottom to top (0 height -> 27.5 height).</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
      &lt;svg 
         version="1.1"
         id="MAIN"
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"
         y="0px"
         viewBox="0 0 1190.6 841.9" 
         enable-background="new 0 0 1190.6 841.9"
         xml:space="preserve"&gt;
             &lt;rect
                id="barchart1" 
                x="148.8"
                y="190"
                fill="#921930"
                width="39.8"
                height="27.5"&gt;
                    &lt;animate 
                       attributeName="height" 
                       from="0" 
                       to="27.5"
                       dur="3s"
                       fill="freeze"/&gt;
             &lt;/rect&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4kp5Lq53/" rel="noreferrer">http://jsfiddle.net/4kp5Lq53/</a> </p>