svg width css animation from left to right instead right to left - html

Question

Is there a way to make the green boxes behave like the red ones but in opposite direction? The width should shrink from left to right and not right to left. I know its possible if i replace the boxes with div's and give those a background color, but it tried it and it just doesnt look as good. Also the hover is not doing what it should do, cant seem to fix that either.
https://jsfiddle.net/v72tjcae/
.block rect{
transition: 200ms;
transition-timing-function: ease-in-out;
-webkit-transition: 200ms;
-webkit-transition-timing-function: ease-in-out;
}
.block:hover rect{
width: 0px;
}
<svg class="emblem" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
height="500px" viewBox="0 0 553 553" enable-background="new 0 0 553 553"
xml:space="preserve">
<g id="Layer_2">
<g class="block">
<rect x="277" y="126" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="126" fill="#004D44" width="157" height="88"/>
</g>
<g class="block">
<rect x="277" y="232" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="232" fill="#004D44" width="157" height="88"/>
</g>
<g class="block">
<rect x="277" y="339" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="339" fill="#004D44" width="157" height="88"/>
</g>
</g>
</svg>