title: How to stretch SVGs with an expanding parent container?
body: <p>I have a div that holds two inline SVGs. When the user mouses over that div, I use a CSS transformation to double its height. I'd like the SVGs' height to scale with the parent div as it changes.</p>
  
  <p>Currently, when I mouseover the parent div, its height changes properly, as does the SVGs' height, but when I mouseout, their height shrinks immediately drops down to its original value, <a href="http://www.dcwebdev.net/timecapsule/svg-scale-test.htm" rel="nofollow">like this</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;div id="logo"&gt;Time Capsule&lt;/div&gt;
      &lt;div id="navButtons"&gt;
          &lt;a href="#" id="loginBttn"&gt;
              &lt;svg height="100%" viewBox="0 0 50 50" id="loginSVG"&gt;
                  &lt;circle cx="25" cy="25" r="25" stroke="none" fill="blue" class="background" /&gt;
                  &lt;polyline points="15,10, 35,10, 35,40, 15,40" style="stroke:white; stroke-width:4; fill:none" class="door"/&gt;
                  &lt;g id="arrow"&gt;
                      &lt;line x1="25" y1="25" x2="10" y2="25" style="stroke:white; stroke-width:4" class="arrowSpine"/&gt;
                      &lt;polyline points="15,20,10,25,15,30" style="stroke:white; stroke-width:4; fill:none" class="arrowPoint" /&gt;
                  &lt;/g&gt;
              &lt;/svg&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
              &lt;svg height="100%" viewBox="0 0 50 50" id="loginSVG"&gt;
                  &lt;circle cx="25" cy="25" r="25" stroke="none" fill="blue" class="background" /&gt;
                  &lt;line x1="10" x2="40" y1="25" y2="25" style="stroke:white; stroke-width:4" /&gt;
                  &lt;line x1="25" x2="25" y1="10" y2="40" style="stroke:white; stroke-width:4" /&gt;
              &lt;/svg&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#nav { background-color:#000; width:100%; height:50px; transition:height 0.5s; }
  #nav svg { height:50px; width:50px; }
  #nav:hover { height:100px; transition:height 0.5s; }
  #nav:hover svg { height:100px; width:100px; transition:height 0.5s; }
  #nav:hover svg .background { height:100px; width:100px; transition: height 0.5s; }
  #nav #logo { color:white; float:left; }
  #nav #navButtons { float:right; top:-20px; }
  </code></pre>
  
  <p>Is there a way to fix the mouseover behavior with just css? I know I could use javascript, but I'm curious if a css-only fix is possible.</p>