center group element inside svg

Question

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 <g>element that I would like to be centered horizontally and vertically in the middle of its parent svg element, and so in the middle of the viewport.

I have tried using CSS (absolute positioning, translateX(), etc) to no avail. Is it at all possible?

Here is a prototype on codepen.

Answer 1

It looks like you just needed to translate the <g> that holds the path, which you could calculate and do dynamically with javascript

body{
  width:100%;
  height:100%;
  overflow:hidden;
}
.logo{
    position:relative;
      display:block;
    margin:auto;
    border:3px solid black;
    width:600px;
    height:600px;
}
#twitter-g{
    transform: translate(200px,200px);
}
.twitter {

    transform-origin: center center;
    animation: kaboom 5s linear infinite;
}

<svg class="logo">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="border:1px solid grey;">
        <g id="twitter-g" fill="#000000" class="container">
            <path d="M58.9955911,58.7183976 C99.4566331,79.3047392 133.650878,78.1170656 133.650878,78.1170656 C133.650878,78.1170656 120.68763,32.5895762 160.755848,12.3991291 C200.824065,-7.79132132 228.396755,26.2491244 228.396755,26.2491244 C228.396755,26.2491244 235.384824,24.315861 240.59162,22.3825976 C245.798417,20.4493343 253.334569,16.9970781 253.334569,16.9970781 L240.987715,39.2074998 L260,37.1764668 C260,37.1764668 257.656684,40.6294106 250.047652,47.6623904 C242.43862,54.69537 239.302565,58.3286922 239.302565,58.3286922 C239.302565,58.3286922 242.020715,113.130077 213.376072,155.322032 C184.731424,197.513986 147.720866,222.8365 93.957074,228.16601 C40.1932825,233.49552 5.17847695,211.53858 5.17847695,211.53858 C5.17847695,211.53858 28.6920398,210.186177 43.6753907,204.412539 C58.6587425,198.638903 80.2081762,183.430306 80.2081762,183.430306 C80.2081762,183.430306 49.5677752,173.928918 38.5686573,163.239856 C27.569539,152.550794 24.8197595,146.216535 24.8197595,146.216535 L55.0673346,145.820644 C55.0673346,145.820644 23.2484569,128.797323 14.2134669,115.337023 C5.17847604,101.876723 4,88.8123134 4,88.8123134 L27.2546096,98.2762376 C27.2546096,98.2762376 7.92825788,71.7889924 5.17847695,51.2026509 C2.4286974,30.6163093 8.71390781,19.5313562 8.71390781,19.5313562 C8.71390781,19.5313562 18.5345492,38.1320559 58.9955911,58.7183976 Z" id="twitter" class="twitter"></path>
        </g>
    </g>
</svg>