SVG > Animate width from middle

I got a logo in SVG that I want to animate. There is a middle part that will remain fixed but the sides strokes will actually expands and get around the whole thing. There is and exemple of what i want to do actually:

<svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw">
<style type="text/css">
    .st0{fill:#656E76;}
</style>
<g>
    <rect id="rect1" class="st0" cx="50" cy="50" x="0" y="40.5" width="158.9" height="6.3"/>
    <rect id="rect2" class="st0" cx="0" cy="100" x="0" y="6.4" width="6.3" height="34.4"/>
    <rect id="rect3" class="st0" cx="0" cy="100" x="152.6" y="6.4" width="6.3" height="34.4"/>
    <rect id="rect4" class="st0" cx="0" cy="0" x="0" y="0.2" width="38.8" height="6.3"/>
    <rect id="rect5" class="st0" cx="100" cy="0" x="120.2" y="0.2" width="38.8" height="6.3"/>

    <animate xlink:href="#rect1" attributeName="width" from="0" to="158.9" begin="0s" dur="0.4s" />
    <animate xlink:href="#rect2" attributeName="height" from="0" to="34.4"  begin="0.4s" dur="0.25s" />
    <animate xlink:href="#rect3" attributeName="height" from="0" to="34.4" begin="0.4s" dur="0.25s" />
    <animate xlink:href="#rect4" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" />
    <animate xlink:href="#rect5" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" />
</g>

At the moment, the animation kind of work but I could not make my object expanding from their correct center. By exemple the bottom line should expand from its middle, the side lines should expand from the bottom etc.

Need help about that. Can someone lend a hand please?