Html svg宽度css动画从左到右，而不是从右到左

有没有办法让绿色的盒子和红色的盒子一样，但方向相反？宽度应从左向右收缩，而不是从右向左收缩。我知道如果我把盒子换成div的并给它们加上背景色是有可能的，但它试过了，只是看起来不太好。此外，悬停没有做它应该做的，似乎也无法解决这一问题

.block rect{
过渡时间：200ms；
过渡定时功能：易进易出；
-webkit转换：200ms；
-webkit转换计时功能：轻松输入输出；
}
.块：悬停矩形{
宽度：0px；
}

你知道这只在Chrome上有效吗？哦，该死的，你是对的，但仍然如此。你认为这在chrome中是可能的吗？当然，设置x向下和宽度向上的动画。

.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>