title: center group element inside svg
body: <p>I'm experimenting using an svg figure as a zoom-in page transition. This html page has an SVG element that will cover the entire screen, in which is a <code>&lt;g&gt;</code>element that I would like to be centered horizontally and vertically in the middle of its parent <code>svg</code> element, and so in the middle of the viewport.</p>
  
  <p>I have tried using CSS (absolute positioning, translateX(), etc) to no avail. 
  Is it at all possible?</p>
  
  <p>Here is a <a href="http://codepen.io/pixeline/pen/xiayC" rel="noreferrer">prototype on codepen</a>.</p>