title: Vertically Align Rect Elements Inside SVG By Center of Rect
body: <h2>Goal:</h2>
  
  <p>I found a <a href="http://tobiasahlin.com/spinkit/" rel="nofollow noreferrer"><strong>tutorial</strong></a> online to make a CSS3 infinite loading icon, using rectangles which grow and shrink in height. They end up appearing like:</p>
  
  <p><img src="https://i.stack.imgur.com/mJwHI.gif" alt="enter image description here"></p>
  
  <p>It uses 5 <code>div</code>s wrapped in an outer <code>div</code>, and works perfectly. I want to try and recreate the effect using an SVG though, so that I can reference it with just an image, not having to add 5 HTML elements.</p>
  
  <hr>
  
  <h2>What I Have:</h2>
  
  <p>I started off with the same CSS animation code, and used 5 <code>rect</code>s inside the <code>svg</code> tags. The animation works perfect, but I can't get the rectangles to be centered vertically. Since they are placed using <code>x</code> and <code>y</code> coordinates, which correspond to the top/left point of each rectangle, they are fixed to that location.</p>
  
  <pre><code>&lt;svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
    &lt;rect class="rect1" fill="black" height="30" width="6" x="0" /&gt;
    &lt;rect class="rect2" fill="black" height="30" width="6" x="10" /&gt;
    &lt;rect class="rect3" fill="black" height="30" width="6" x="20" /&gt;
    &lt;rect class="rect4" fill="black" height="30" width="6" x="30" /&gt;
    &lt;rect class="rect5" fill="black" height="30" width="6" x="40" /&gt;
  &lt;/svg&gt;
  
  rect {
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
    alignment-baseline:bottom;
  }
  
  .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  
  .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  
  .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  
  .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
  
  @-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
  }
  
  @keyframes stretchdelay {
    0%, 40%, 100% { 
      transform: scaleY(0.4);
      -webkit-transform: scaleY(0.4);
    }  20% { 
      transform: scaleY(1.0);
      -webkit-transform: scaleY(1.0);
    }
  }
  </code></pre>
  
  <p>See Working Example: <strong><a href="http://codepen.io/Kelderic/pen/vuipF" rel="nofollow noreferrer">http://codepen.io/Kelderic/pen/vuipF</a></strong></p>
  
  <p>One thing that is odd, it's running in CodePen, the same code doesn't run in JSFiddle. It also doesn't run when I embed the CodePen as an SVG.</p>
  
  <hr>
  
  <h2>Question</h2>
  
  <p>Is using CSS animations like this supposed to work for SVG elements, and can I fix them in the center to match the original?</p>
  
  <hr>
  
  <h2>Edit</h2>
  
  <p>js1568's answer provides what SHOULD be a fix, and it does make things work in Chrome. It has no effect in Firefox though, and after some research I've found that I'm not the only one who has had the same problem with Firefox.</p>
  
  <p><a href="https://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox">Setting transform-origin on SVG group not working in FireFox</a></p>
  
  <p>I think the only answer here is that at this time this won't work in all browsers. (If anyone does know a way, feel free to add an answer though!)</p>
  
  <hr>
  
  <h2>Edit 2</h2>
  
  <p>I figured a way to make this work in Firefox, explained in an answer below. Still no IE9-11 though.</p>