title: Setting transform-origin on SVG group not working in Firefox
body: <p>I am having an issue with getting transform-origin to work in Firefox (v.18+, other versions not tested). Webkit browsers work as expected. I'm trying to set the origin to the center of the group, but nothing I've tried has worked so far. </p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    -webkit-transform-origin: 50% 50%;
    transform-origin: center center;
    -webkit-animation: prop 2s infinite;
    animation: prop 2s infinite;
  }
  
  @-webkit-keyframes prop {
    0% {
      -webkit-transform: scale(1, 1);
    }
    20% {
      -webkit-transform: scale(1, .8);
    }
    40% {
      -webkit-transform: scale(1, .6);
    }
    50% {
      -webkit-transform: scale(1, .4);
    }
    60% {
      -webkit-transform: scale(1, .2);
    }
    70% {
      -webkit-transform: scale(1, .4);
    }
    80% {
      -webkit-transform: scale(1, .6);
    }
    90% {
      -webkit-transform: scale(1, .8);
    }
    100% {
      -webkit-transform: scale(1, 1);
    }
  }
  
  @keyframes prop {
    0% {
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
    20% {
      transform: matrix(1, 0, 0, .8, 0, 0);
    }
    40% {
      transform: matrix(1, 0, 0, .6, 0, 0);
    }
    50% {
      transform: matrix(1, 0, 0, .4, 0, 0);
    }
    60% {
      transform: matrix(1, 0, 0, .2, 0, 0);
    }
    70% {
      transform: matrix(1, 0, 0, .4, 0, 0);
    }
    80% {
      transform: matrix(1, 0, 0, .6, 0, 0);
    }
    90% {
      transform: matrix(1, 0, 0, .8, 0, 0);
    }
    100% {
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16"&gt;
      &lt;g id="test"&gt;
          &lt;rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>